it-swarm.com.de

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

Für Android wird empfohlen, dp-Messungen (dichteunabhängige Pixel) für Benutzeroberflächenelemente zu verwenden, und es gibt Konventionen wie die Verwendung von 48dp für eine Schaltflächenhöhe usw.

Ich arbeite an einer Webanwendung und es wird viel Kritik am Design der Benutzeroberfläche laut, dass es nicht den Android Designstandards entspricht. Offensichtlich wird meine Anwendung anders aussehen Da es CSS und HTML anstelle des Android Holo-Themas verwendet, möchte ich es dennoch so weit wie möglich anpassen. CSS erlaubt jedoch keine dichteunabhängigen Messungen.

Wenn ich meine Anwendung auf verschiedenen Auflösungen und Pixeldichten teste, sieht sie nicht gut aus und manchmal ist sie überproportional, sodass sie nicht einmal funktionsfähig ist. CSS hat keine dp-Einheiten wie Android native Entwicklung tut, aber ich habe mich gefragt, was einige Alternativen sind.

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 auf allen Auflösungen/Dichten gut aussieht und funktioniert?

76
Brad

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änglichen enthaltenden Blocks.
  • vmin - Entspricht dem kleineren von vw oder vh.
  • vmax - Entspricht dem größeren von vw oder vh.

Der einzige mobile Browser, der diese Einheiten nicht unterstützt, ist Opera. http://caniuse.com/#feat=viewport-units

23
cimmanon

Ich bin mit der aktuell akzeptierten Antwort nicht einverstanden. Wie uber5001 andeutet, ist ein px eine feste Einheit, und zwar in einem ähnlichen Geist wie die Bemühungen der Android-spezifischen dp.

Per Materialspezifikation :

Verwenden Sie beim Schreiben von CSS px, wo dp oder sp angegeben sind. Dp muss nur bei der Entwicklung für Android verwendet werden.

Zusätzlich

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

143
Tohuw

In CSS3 ist es möglicherweise genauer zu sagen, dass das Web nicht über das Android-Symbol px verfügt. Die Spezifikation für CSS3s px sagt dies:

pixel; 1px entspricht 1/96 von 1in

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

14
uber5001

Verwenden Sie rem.

Dies ist die Schriftgröße des Root-Elements und eine sehr gute Basiseinheit für die Größe anderer UI-Elemente.

Wenn man dieselbe absolute Größe (in Zentimeter) verwendet, wären 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, wären der Text und andere Elemente auf Mobilgeräten viel zu klein oder auf dem Desktop viel zu groß.

Die rem -Einheit ist vor Ort, weil dort steht: "Hey, so groß sollte normaler Text sein." Die Größe anderer UI-Elemente darauf zu gründen, ist eine ziemlich vernünftige Wahl.

13

Ab CSS3 gibt es keine CSS-Einheiten, die wirklich geräteunabhängig sind. Siehe W3C-Spezifikation für absolute Längen . Insbesondere stimmen die absoluten Einheiten möglicherweise nicht mit ihren physikalischen Maßen überein.

Wenn physikalische 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 Punkten zurückgegeben wird:

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

Und benutze es:

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

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 einige Berechnungen basierend auf der Größe des Ansichtsfensters durchführen, um eine Schriftgröße im Stammelement anzuwenden, und die gesamte Benutzeroberfläche würde entsprechend angepasst. Dieses Zeug ist für mich noch ein bisschen Hexerei.

10
Darlan Alves

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.

1