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

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?

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

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).

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.

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.

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);
}

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.

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.

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;