Für Android wird empfohlen, dp-Messungen (dichteunabhängige Pixel) für UI-Elemente zu verwenden, und es gibt Konventionen, z. B. die Verwendung 48dp
für eine Schaltflächenhöhe usw.
Ich arbeite an einer Webanwendung und bekomme viel Kritik am UI-Design, da es nicht den Android-Designstandards entspricht. Natürlich wird meine Anwendung anders aussehen, da sie CSS und HTML anstelle des Android Holo-Themas verwendet, aber ich möchte sie trotzdem so weit wie möglich anpassen. CSS erlaubt jedoch keine dichteunabhängigen Messungen.
Wenn ich meine Anwendung mit unterschiedlichen Auflösungen und Pixeldichten teste, sieht sie nicht gut aus, und manchmal ist sie weit überproportional, sodass sie nicht einmal funktionsfähig ist. CSS hat keine dp-Einheiten wie die native Android-Entwicklung, aber ich habe mich gefragt, welche Alternativen es gibt.
Kann ich die Pixeldichte mit Javascript irgendwie ermitteln und alles manuell entsprechend skalieren? Was ist der beste Weg, um eine Web-App zu erstellen, die bei allen Auflösungen / Dichten gut aussieht und funktioniert?
px
ist das gleiche wiedp
auf Android. Gemäß der CSS3-Spezifikation. auf Einheiten und Werte .Antworten:
http://www.w3.org/TR/css3-values/#lengths
Die nächste in CSS verfügbare Einheit sind die prozentualen Einheiten des Ansichtsfensters.
Der einzige mobile Browser, der weiß, dass diese Geräte nicht unterstützt werden, ist Opera. http://caniuse.com/#feat=viewport-units
quelle
px
Einheit in CSS (kontraintuitiv) tatsächlich bereits pixeldichteunabhängig ist - "ein CSS-Pixel ist kein Pixel", es gibt viele Artikel darüberIch bin mit der derzeit akzeptierten Antwort nicht einverstanden. Wie uber5001 vorschlägt,
px
ist a eine feste Einheit und ähnelt den Bemühungen der Android-Spezifikationdp
.Pro Materialspezifikation :
zusätzlich
quelle
Verwenden Sie
rem
.Dies ist die Schriftgröße des Stammelements und eine sehr gute Basiseinheit für die Größe anderer Benutzeroberflächenelemente.
Wenn man dieselbe absolute Größe (in Zentimetern) verwendet, sind der Text und andere Elemente auf Mobilgeräten viel zu groß oder auf dem Desktop viel zu klein.
Wenn man die gleiche Anzahl von Pixeln verwendet, sind der Text und andere Elemente auf Mobilgeräten viel zu klein oder auf dem Desktop viel zu groß.
Das
rem
Gerät ist vor Ort, weil dort steht: "Hey, so groß sollte normaler Text sein." Die Größe anderer UI-Elemente darauf zu stützen, ist eine ziemlich vernünftige Wahl.quelle
In CSS3 ist es möglicherweise genauer zu sagen, dass das Web keine Android-Geräte hat
px
. Die Spezifikation für CSS3px
sagt dies:px
könnte in Zukunft die gewünschte Messung sein.quelle
Ab CSS3 gibt es keine CSS-Einheiten, die wirklich geräteunabhängig sind. Siehe die W3C-Spezifikation für absolute Längen . Insbesondere stimmen die absoluten Einheiten möglicherweise nicht mit ihren physikalischen Maßen überein.
Wenn physische Einheiten ihrem Zweck treu wären, könnten Sie so etwas wie Punkte verwenden. Punkte sind nah genug an dps:
Wenn Sie SCSS verwenden, können Sie eine Funktion schreiben, die in pts zurückgegeben wird:
Und benutze es:
quelle
Was ist mit einer Schnittstelle, die auf Rem-Einheiten basiert?
Ich bin in dieser Angelegenheit nicht erfahren genug, um dies zu bestätigen, aber ich denke, Sie könnten basierend auf der Größe des Ansichtsfensters einige Berechnungen anstellen, um eine Schriftgröße im Stammelement anzuwenden, und die gesamte Benutzeroberfläche würde sich entsprechend anpassen. Dieses Zeug ist für mich noch ein bisschen Hexerei.
quelle
Warum nicht Punkte verwenden, es ist eine einheitliche Größe für alle Geräte. Und ist relativ zur Bildschirmgröße. Die meisten kennen es nicht, da es aus dem traditionellen Verlagswesen stammt.
quelle
Was ist mit einer Mischung zwischen vw (Bildschirmbreite für jedes Gerät) und em? Hier ändert sich die Schriftgröße dynamisch, abhängig von der Bildschirmbreite Ihres Geräts. Verwenden Sie in Ihrer Haupt-CSS-Datei die nächste Regel:
(Breite für iPhone 6/7/8 ist 375px, ändern Sie es auf 320px (iPhone5) und so weiter)
In allen Fällen läuft es perfekt. Es gibt nur ein Minus. Wenn Ihr Ziel "pixelgenau" ist, müssen Sie nach dem Punkt große Zahlen verwenden.
Beispiel: Ihr Ziel ist die Schriftgröße h5: 18px auf allen Bildschirmen.
Dann wird dein perfektes "em" sein:
ohne Perfektion 18/10 verwenden:
Laut Google Chrome erhalten Sie 18.0096px;
quelle