Was sind dp-Einheiten (dichteunabhängige Pixel) mit CSS?

88

Für Android wird empfohlen, dp-Messungen (dichteunabhängige Pixel) für UI-Elemente zu verwenden, und es gibt Konventionen, z. B. die Verwendung 48dpfü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?

Brad
quelle
2
CSS pxist das gleiche wie dpauf Android. Gemäß der CSS3-Spezifikation. auf Einheiten und Werte .
Omninonsense

Antworten:

26

http://www.w3.org/TR/css3-values/#lengths

Die nächste in CSS verfügbare Einheit sind die prozentualen Einheiten des Ansichtsfensters.

  • vw - Entspricht 1% der Breite des anfänglichen enthaltenden Blocks.
  • vh - Entspricht 1% der Höhe des anfänglich enthaltenden Blocks.
  • vmin - Entspricht dem kleineren Wert von vw oder vh.
  • vmax - Entspricht dem größeren Wert von vw oder vh.

Der einzige mobile Browser, der weiß, dass diese Geräte nicht unterstützt werden, ist Opera. http://caniuse.com/#feat=viewport-units

Cimmanon
quelle
Werden diese Einheiten bei der Bereitstellung unter iOS ordnungsgemäß angezeigt?
jmhostalet
@jmhostalet Nein, der Browser gerät in eine Endlosschleife, da die Höhe des Ansichtsfensters dynamisch ist.
Rookie1024
1
Diese Antwort ist falsch, da die pxEinheit in CSS (kontraintuitiv) tatsächlich bereits pixeldichteunabhängig ist - "ein CSS-Pixel ist kein Pixel", es gibt viele Artikel darüber
ChaseMoskal
169

Ich bin mit der derzeit akzeptierten Antwort nicht einverstanden. Wie uber5001 vorschlägt, pxist a eine feste Einheit und ähnelt den Bemühungen der Android-Spezifikation dp.

Pro Materialspezifikation :

Verwenden Sie beim Schreiben von CSS px überall dort, wo dp oder sp angegeben ist. Dp muss nur für die Entwicklung für Android verwendet werden.

zusätzlich

Ersetzen Sie beim Entwerfen für das Web dp durch px (für Pixel).

Tohuw
quelle
24
Das ist die Antwort. +1 für die Angabe der Materialspezifikation.
Qix - MONICA wurde
2
Aus MDN: "Die Einheit in stellt keinen physischen Zoll auf dem Bildschirm dar, sondern 96 Pixel. Das bedeutet, dass unabhängig von der tatsächlichen Bildschirmpixeldichte 96 dpi angenommen wird. Auf Geräten mit einer größeren Pixeldichte beträgt 1 Zoll kleiner als 1 physischer Zoll. In ähnlicher Weise sind mm, cm und pt keine absolute Länge. " developer.mozilla.org/en/docs/Web/CSS/…
Maciej Krawczyk
1
CSS-Zoll und physischer Zoll sind zwei verschiedene Dinge. 1 CSS-Zoll ist immer 96px, unabhängig von der Bildschirmdichte. Nur auf einem 96-dpi-Monitor können CSS-Zoll und physischer Zoll als gleich angesehen werden.
Maciej Krawczyk
1
@MaciejKrawczyk Ich verstehe die Grundlage Ihrer Behauptung über die Größenunterschiede bei px. Ich könnte darüber streiten, wie ein px tatsächlich eine feste Einheit ist, und die Skala, die Sie einbeziehen, ändert nichts an dieser Grundwahrheit, aber das ist ein roter Hering. Die Realität ist, dass die Materialspezifikation direkt angibt, px überall dort zu verwenden, wo dp vorgeschlagen wird. Angesichts der Frage von Brad nach Android-Designstandards gab ich die kanonische und damit korrekte Antwort.
Tohuw
2
Das jüngste Update (Mai 2018) zum Materialdesign erklärt die Pixeldichte ausführlicher material.io/design/layout/#pixel-density
Squiggle
17

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 remGerä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.

Konstantin Schubert
quelle
16

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:

Pixel; 1px entspricht 1/96 von 1in

px könnte in Zukunft die gewünschte Messung sein.

uber5001
quelle
2
Ich kann nicht sehen, wie dieser Übergang stattfinden wird, ohne alles zu brechen. Die Verwendung der gleichen absoluten Größe (in cm) für beispielsweise Text auf Mobilgeräten und Desktops ist kein gutes Paradigma.
Konstantin Schubert
Und 1in ist als 96px definiert. CSS-Einheiten wie in, mm sind pixeldichteabhängig.
Maciej Krawczyk
yo siempre benutze px en vez de dp y va bien
Ivan Paredes
Verblüfft: OOOO
Dwjohnston
12

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:

1 in = 72 pt
1 in = 160 dp

1 dp = 72 / 160 pt

Wenn Sie SCSS verwenden, können Sie eine Funktion schreiben, die in pts zurückgegeben wird:

@function dp($_dp) {
  @return (72 / 160) * $_dp + pt;
}

Und benutze es:

.shadow-2 {
  height: dp(2);
}
Mihai Danila
quelle
10

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.

Darlan Alves
quelle
Sie müssen die Schriftgröße nicht einstellen. Die Standardschriftgröße des Stammelements ist normalerweise eine vernünftige Wahl für das jeweilige Gerät.
Konstantin Schubert
1

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.

Franklin Mayfield
quelle
0

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:

font-size: calc(100vw * 10 / 375);

(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:

h5 { 
 font-size: 1.79904em;
 }

ohne Perfektion 18/10 verwenden:

h5 { 
 font-size: 1.8em;
 }

Laut Google Chrome erhalten Sie 18.0096px;

Yuriy Ivanochko
quelle