Wie konvertiert man zwischen Android DP und CSS px?

Ich sehe, das ist wahrscheinlich eine noob Frage, aber es verwirrt mich wirklich.

Ich lese Dokumente aus Google Material Design zusammen mit einigen Implementierungen in CSS. Die Spezifikation ist in Android geschrieben dp, während CSS-Codes pxals Längeneinheit verwendet werden.

Was mich verwirrt ist, dass die CSS-Implementierungen oft den genauen Wert aus der Spezifikation verwenden, zum Beispiel sollte ein Toast Folgendes haben :

Einzeilige Snackbarhöhe: 48 dp hoch

Mindestbreite: 288 dp

2 dp abgerundete Ecke

entsprechendes CSS :

min-height: 48px;
min-width: 288px;
...
border-radius: 2px;

Nach meinem derzeitigen Verständnis wird ein Android DPim Allgemeinen in der Größe eines Pixels auf einem 160-dpi-Bildschirm angezeigt, während das CSS pxals visueller Winkel definiert ist. Also ist a pxzufällig dasselbe wie a, dpwenn man in einiger Entfernung sieht? Wenn ja, ist das ein gängiges Muster pxwie dpin CSS, oder habe ich den CSS-Code völlig falsch verstanden?

Ich weiß vorher nichts über Android-Entwicklung und keinen Designer. Vielen Dank für jede Hilfe.

Ich denke das akzeptierte ist falsch. Das css px ist tatsächlich ein geräteunabhängiges Pixel (dip), und es ist ein verbreitetes Muster, px als dp in css zu verwenden.

Ich glaube, die vollständige Antwort auf Ihre Frage finden Sie hier:

/programming/2025282/difference-between-px-dp-dip-and-sp-in-android

Um dp in px zu konvertieren, müssen Sie die Anzeigeabmessungen berücksichtigen, an die Sie sich wenden. Je höher der DPI-Wert, desto mehr Pixel müssen im selben Bereich verstopft werden, damit sie gut aussehen und Pixelbildung vermieden wird :

ldpi: 1 dp = 0,75 px
mdpi: 1 dp = 1 px
hdpi: 1 dp = 1,5 px
xhdpi: 1 dp = 2 px
xxhdpi: 1 dp = 3 px
xxxhdpi: 1 dp = 4 px

Z.B:

Ein 3x3 dp-Quadrat in CSS oder Photoshop muss sein:

2,25x2,25 px - ldpi
3x3 px - mdpi (Samsung ACE, Xperia X8)
6x6 px - xhdpi (Xperia S, Google Nexus 4)
9x9 px - xxhdpi (Samsung S4 - S5, HTC One)
12x12 px - xxxhdpi (diese Auflösung) wird auf Geräten der nächsten Generation verwendet)

Basierend auf dem oben Gesagten sollten Ihre Berechnungen mit einem 3x-dp-Multiplikator für XXHDPI-Bildschirme folgendermaßen aussehen:

min-height: 144px;
min-width: 864px;
...
border-radius: 6px;

Android verkleinert Bilder automatisch, wenn es feststellt, dass die Auflösung des verwendeten Geräts niedriger ist, sodass Sie sicher mit XXHDPI entwickeln können, da es die Mehrheit der heutigen High-End-Geräte auf dem Markt anspricht.

Hier ist ein einfacher Konverter, der die Arbeit für Sie erledigt : http://androidpixels.net/

W3C sagt :

Die px-Einheit schützt Sie somit davor, die Auflösung des Geräts kennen zu müssen. Egal ob die Ausgabe 96 dpi, 100 dpi, 220 dpi oder 1800 dpi ist, eine Länge, die als ganze Zahl von px ausgedrückt wird, sieht auf allen Geräten immer gut und (...)

Und obwohl es heißt:

Stellen Sie sich einen CRT-Computermonitor aus den 90er Jahren vor, um sich ein Bild vom Erscheinungsbild eines PX zu machen: Der kleinste Punkt, den er anzeigen kann, misst etwa 0,25 mm (1/100 Zoll) oder etwas mehr. Die px-Einheit erhielt ihren Namen von diesen Bildschirmpixeln.

Es heißt auch:

Tatsächlich verlangt CSS, dass 1px genau 1/96 Zoll in allen gedruckten Ausgaben sein muss (...)

Unter Berücksichtigung der Tatsache, dass Bildschirmgeräte standardmäßig mit 96 dpi konfiguriert sind, ist dies die beste Voraussetzung für die Interpretation eines CSS-Pixels durch den Browser:

96 css-px = ~ 1 inch

Und wir wissen, dass in Android:

160 dp = ~ 1 inch

So:

96 css-px = ~ 160 dp
css-px-length = round(dp-length * 96 / 160)

Und demnach:

min-height: 29px;
min-width: 173px;
...
border-radius: 2px; /* 2dp is 1.2px from the formula but it wont work */

Nun, ich dachte, das stimmte, bis ich die Toast- Größen von Google Polymer überprüfte :

  min-height: 48px;
  min-width: 288px;
  padding: 16px 24px 12px;
  box-sizing: border-box;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
  border-radius: 2px;
  bottom: 12px;
  left: 12px;
  font-size: 14px;

Es handelt sich also um eine 1: 1-Konvertierung, von der wir erfahren haben, dass Android-Browser Folgendes verwenden:

1 css-px = 1 dp

96 css-px pro Zoll werden für andere Geräte wie Desktops und Laptops verwendet.

Fazit: CSS-Pixel sind unabhängig von der Auflösung des Geräts und auf Android-Geräten entspricht 1 CSS-Pixel 1 dpi.

Es gibt keine richtige Antwort, es gibt tatsächlich zwei:

1. Von Google empfohlen (z. B. im Udacity-Kurs über Materialdesign): Verwenden Sie eine einfache Konvertierung, die in vielen Fällen genau wie in der Polymerbibliothek 1: 1 ist. Es ist beispielsweise nicht für die Retina-Anzeige geeignet. Verwenden Sie daher anstelle von 1: 1 ein Dichteverhältnis, das in der Gerätetabelle im offiziellen Material Design Guide ( Tabelle mit Verhältnissen und spezifischen Metriken für einige gängige Geräte ) angegeben ist, und geben Sie geeignete @media-Abfragen für an Auflösungsschwellen und Assets, unter der Annahme, dass 1dp für eine mdpi-Anzeige (160dpi / ppi) gleich 1px ist .

Hinweis: Gesamtidee: am unteren Rand der Seite: Bildskalierung mit einigen Bildern zur Visualisierung der Verhältnisse für mehrere Schwellenwerte für die Bildschirmauflösung (Haltepunktbild)

2. Wenn Sie eine ultrakonsistente Gestaltung für bestimmte Geräte wünschen , müssen Sie mehr Nachforschungen und Berechnungen anstellen, und was wichtiger ist, ist ein Stapel weiterer @media - Abfragen, um so viele Geräte zu unterstützen, wie Sie möchten, und Fallback - Funktionen bereitzustellen (mit dem Methode, die an erster Stelle erwähnt wurde) für diejenigen, die Sie nicht so sehr interessieren.

Hier finden Sie detailliertere Informationen für diejenigen, die sich eingehender mit dem Thema befassen möchten. Dies ist jedoch eine Erklärung und Logik. Die obigen Ausführungen sind eine vollständige Antwort :

Die Sache ist, dass "Pixeldichte" laut dem offiziellen Leitfaden von Material Design (Layout> Einheiten und Maße) ist:

Die Anzahl der Pixel, die in einen Zoll passen.

Die Pixeldichte ist also im Grunde genommen ein neuer Name für einen ppi-Wert oder ein dpi-Wert, den viele Leute nicht als eigenständiges Element erkennen.

Definition von 1dp nach dem gleichen Leitfaden:

Ein dp entspricht einem physikalischen Pixel auf einem Bildschirm mit einer Dichte von 160 . Dp berechnen:

dp = (Breite in Pixel * 160) / Bildschirmdichte

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

Kernprinzip des Materialdesigns ist die Beibehaltung einheitlicher physischer Dimensionen über verschiedene Plattformen hinweg, was das Problem der Desktopauflösung, des ppi (/ dpi) und des css-Pixels aufwirft. In diesem Fall sollten Sie wie im Fall von Android bei der Berechnung des dp bleiben Geräte, und es ist nicht wahr, dass die meisten Bildschirme 96ppi sind (eine Annahme, die für CSS wichtig ist), ein großer Teil von ihnen hat ein etwas höheres ppi, und wenn Sie nicht nur traditionelle Desktops, sondern auch normale Laptops berücksichtigen Für Tablets oder "Convertibles" wie "Surface" ist eine Konvertierung erforderlich: Diese reichen normalerweise von 100 bis 130 ppi, wobei der Wert, den ich derzeit verwende, 127 ppi beträgt:

100% = 160ppi -> physikalische 1 Pixel Breite = 1dp -> Rechteck 100x100px = 100x100dp

79% = 127ppi -> physikalische 1 Pixel Breite = ca. 0,8dp -> Rechteck 100x100px = 80x80dp

Obwohl dp ein reines und neues Gerät nur für Android ist, sollten Sie einige Berechnungen durchführen, um die MD-Layouts anzupassen, die alle in dp enthalten sind. Wenn Sie eine genauere Vorstellung davon haben möchten, wie groß das spezifische Element im physischen Sinne sein wird, ist der Wert für den idealen Berührungsgrößenbereich in den Materialdesignrichtlinien für bestimmte Geräte der nützlichste für den Zweck der Frage eine physische. ** Der dp-Wert ändert sich, aber der physikalische Wert bleibt gleich.

Das Problem, warum Sie Einheiten berechnen müssen, wird im Android API-Handbuch (Konvertieren von dp-Einheiten in Pixeleinheiten) näher erläutert. Es gilt weiterhin für mit CSS gestaltete Elemente:

In einigen Fällen müssen Sie Dimensionen in dp ausdrücken und sie anschließend in Pixel konvertieren.

Stellen Sie sich eine Anwendung vor, in der eine Bildlauf- oder Schleudergeste erkannt wird, nachdem sich der Finger des Benutzers um mindestens 16 Pixel bewegt hat. Auf einem Basisbildschirm muss sich der Benutzer um 16 Pixel / 160 dpi bewegen, was einem Zehntel Zoll (oder 2,5 mm) entspricht, bevor die Geste erkannt wird. Auf einem Gerät mit einer Anzeige mit hoher Dichte (240 dpi) muss sich der Benutzer um 16 Pixel / 240 dpi bewegen, was 1/15 Zoll (oder 1,7 mm) entspricht. Die Entfernung ist viel kürzer und die Anwendung erscheint dem Benutzer daher empfindlicher.

Die zuvor erwähnte Polymerumwandlung 1: 1 ist wahrscheinlich darauf zurückzuführen, dass die Dichte von 96 dpi oder sogar die von mir angegebene Dichte irgendwo in einer niedrigen Dichte oder sogar (wie im Fall von 96 dpi) darunter liegt. Unter Berücksichtigung der Tatsache, dass der dp-Wert nicht als CSS akzeptiert wird, ist es einfacher anzunehmen, dass das Dichteverhältnis (0,75 für niedrig, 1,0 für mittel usw.) dasjenige ist, das zur Vereinfachung und für mehrere Größen verwendet werden sollte Bildschirmunterstützung, die in der Gerätetabelle für Material Design (siehe oben) aufgeführt ist. Es wird sogar als eine der Best Practices im oben genannten Kapitel des Android API-Handbuchs erwähnt. Und hier könnte die Polymerumwandlung 1: 1 gut sein, da viele Geräte das Dichteverhältnis auf Stufe 1 haben.

Zurück zum letzten Dilemma: das CSS PX, wenn Sie sich entscheiden, in subtile Nuancen verschiedener Geräte einzutauchen. Wenn Sie nicht so anfragend sind, halten Sie sich einfach an das Dichteverhältnis aus der MD-Tabelle. Aber wenn Sie ein Perfektionist sind, hat dieser Zusammenhang zwischen CSS-Pixeln und physischen Dimensionen eine perfekte (und ziemlich einfache Erklärung) in einer W3C-Kandidatenempfehlung:

Die absoluten Längeneinheiten sind relativ zueinander festgelegt und auf einem physikalischen Maß verankert. Sie sind hauptsächlich dann nützlich, wenn die Ausgabeumgebung bekannt ist. Die absoluten Einheiten bestehen aus den physikalischen Einheiten ('in', 'cm', 'mm', 'pt', 'pc', 'q') und der Einheit für den visuellen Winkel ('px') :

Beim Ablesen auf Armlänge entspricht 1px also etwa 0,26 mm (1/96 Zoll).

Hinweis: Beachten Sie, dass sich diese Definition der Pixeleinheit und der physischen Einheiten von früheren Versionen von CSS unterscheidet. Insbesondere in früheren Versionen von CSS standen die Pixeleinheit und die physikalischen Einheiten nicht in einem festen Verhältnis zueinander: Die physikalischen Einheiten waren immer an ihre physikalischen Abmessungen gebunden, während die Pixeleinheit so variierte, dass sie dem Referenzpixel am ehesten entsprach. (Diese Änderung wurde vorgenommen, weil zu viel vorhandener Inhalt von der Annahme von 96 dpi abhängt, und wenn diese Annahme gebrochen wird, bricht der Inhalt.)

Diese neue Definition von px (unter Berücksichtigung der physischen Dimensionen) füllt die Lücke zwischen CSS-Pixeln und dps und lässt uns mithilfe einfacher Messberechnungen sicherstellen, dass die sogenannte Ausgabeumgebung, die in diesem Fall konsistent ist (im physischen Sinne) ) MD-Layout , bleibt auf verschiedenen Geräten und Plattformen gleich. Darüber hinaus verwenden sowohl die W3C- als auch die MD-Richtlinien Gerätebilder mit niedriger und hoher Auflösung, um die Grundidee der Pixel- / Punktabdeckung zu veranschaulichen. Auf einem hochauflösenden Gerät sind mehr Gerätepixel (Punkte) erforderlich, um einen Bereich von 1 x 1 Pixel abzudecken Dies bedeutet, dass die in CSS-Abfragen für die Retina-Anzeige weit verbreiteten Funktionen dasselbe sind, das Sie für Material Design und alle Mobilgeräte bereitstellen müssen (jedoch mit mehr Schwellenwerten).

Verwenden Sie abschließend entweder das von Google empfohlene MD-Dichteverhältnis oder, wenn Sie auf Präzision fixiert sind oder wenn Ihr Design in Bezug auf die physischen Größen absolut konsistent sein muss, die genaue Konvertierung unter Verwendung von ppi / dpi-Werten der spezifischen oder allgemeinen Werte Geräte (was ziemlich verrückt ist), was Sie leicht mit dem Google Resizer-Online-Tool testen können, da sie die in MD Guide empfohlenen gemeinsamen Schwellenwerte und Teilungsregeln für das Verhältnis und die relevanten Namen der Anzeigetypen (xlarge, medium und so weiter) einhalten ) implementiert.

Halten Sie sich also an die MD-Verhältnisse in der Tabelle, und denken Sie daran, dass die Referenz-Pixelgröße dp gleich der Auflösung von mdpi (160) entspricht .