Längen-Einheiten bei CSS und HTML
<2014-06-28>
Längeneinheiten haben bei CSS und HTML verschiedene Eigenschaften. Manche sind "absolut", manche "relativ" und von der Nutzer-Einstellung der Schriftgröße abhängig, etc. . Hier gibt es Erläuterungen dazu.

Längen-Einheiten im Browser:

Vorab:
1dp == 1dip = 0.16mm;
1em = 2,646mm = ~16.6sp (16.54 bzw. 16.666) bei einer Schriftgröße von 100%;
1sp= ~0.06024em bei 100%;

px is one pixel.

sp is scale-independent pixels.

dip is Density-independent pixels. You would use

sp for font sizes dip for everything else.

dip==dp

from here

px Pixels - corresponds to actual pixels on the screen.

in Inches - based on the physical size of the screen.

mm Millimeters - based on the physical size of the screen.

pt Points - 1/72 of an inch based on the physical size of the screen.

dp *Density-independent Pixels* - an abstract unit that is based on the physical density of the screen. These units are relative to a 160 dpi screen, so one dp is one pixel on a 160 dpi screen. The ratio of dp-to-pixel will change with the screen density, but not necessarily in direct proportion. Note: The compiler accepts both "dip" and "dp", though "dp" is more consistent with "sp".

sp *Scale-independent Pixels* - this is like the dp unit, but it is also scaled by the user's font size preference. It is recommend you use this unit when specifying font sizes, so they will be adjusted for both the screen density and user's preference.

will elaborate more on how exactly does dp convert to px:

If running on hdpi device 150x150 px image will take up 100*100 dp of screen space.

If running on mdpi device 150x150 px image will take up 150*150 dp of screen space.

If running on xhdpi device 150x150 px image will take up 75*75 dp of screen space.

The other way around: say, you want to add an image to your application and you need it to fill 100*100 dp control,

you'll need to create different size images for supported screen sizes:

100*100 px image for mdpi

150*150 px image for hdpi

200*200 px image for xhdpi


px
Pixels - corresponds to actual pixels on the screen.

in
Inches - based on the physical size of the screen.

mm
Millimeters - based on the physical size of the screen.

pt
Points - 1/72 of an inch based on the physical size of the screen.

dp
Density-independent Pixels - an abstract unit that is based on the physical density of the screen. These units are relative to a 160 dpi screen, so one dp is one pixel on a 160 dpi screen. The ratio of dp-to-pixel will change with the screen density, but not necessarily in direct proportion. Note: The compiler accepts both "dip" and "dp", though "dp" is more consistent with "sp".

sp
Scale-independent Pixels - this is like the dp unit, but it is also scaled by the user's font size preference. It is recommend you use this unit when specifying font sizes, so they will be adjusted for both the screen density and user's preference.

Themen hierzuAssciated topics:

HTML CSS3

Das könnte Sie auch interessierenFurther readings:
Wann und wie werden im WIM-System Daten codiert?
<2013-08-12>
Aus technischen Gründen werden Zeichenfolgen im WIM-System für die Speicherung oder Übertragung systematisch verändert. Beispielsweise für XHTML-Daten.   Mehr »
Steuerung der Darstellung von Objekten
<2019-02-03>
Das openWIM-System bietet die Möglichkeit, die Darstellung von Themen, Dokumenten, usw. in weiten Teilen zu gestalten, ohne dass dazu Änderungen im Programmcode oder an (HTML-)Vorlagen nötig sind.   Mehr »
Anordnung von WIM-App-Modulen
<2013-03-28>
Innerhalb eines (BOX-)Moduls können Module in verschiedener Art und Weise angeordnet werden. Dieser Beitrag geht näher darauf ein.   Mehr »
Gestaltungs-Hinweise für WIM-Anwendungen
<2014-06-28>
Im Prinzip bietet eine mit dem WIM-System sehr große Freiheiten beider Gestaltung. Um jedoch eine bessere Nutzbarkeit zu erreichen, sollten einige Grundregeln beachten werden.   Mehr »
openWIM beim Handy und Tablet
Von: @VB <2015-04-23>
Die Nutzung des Internets geschieht zunehmend über mittels Smartphones und Tablett-PCs. Neben der Touch-Bedienung stellt die Darstellung auf den eher kleinen Displays signifikant andere Anforderungen.   Mehr »
Internet-Links für openWIM-Entwickler
<2020-03-10>
In den Weiten des Internets gibt es etliche hilfreiche Internetpräsenzen und Dokumente, die für die Entwickler des openWIM-Systems hilfreich sein können. Hier sind einige aufgelistet:   Mehr »
CSS3-Macken und Tipps
<2014-02-16>
CSS3 spielt eine wichtige Rolle bei der WIM-Darstellung - und fällt manchmal aus der Rolle. Hier werden Macken und Tipps zusammengestellt.   Mehr »
Responsive Design
<2015-01-03>
Unter der Bezeichnung "responsive design" oder "adaptive layout" etc. werden Verfahren zusammengefasst, mit deren Hilfe die Darstellung von Inhalten automatisiert an verschiedene Randbedingungen (Display-Größe, Geräte-Art, ...) angepasst werden kann.   Mehr »
Wie können CSS-Regeln im Polymer-Kontext eingesetzt werden?
Von: @VB <2016-10-02>
Die Style-Regeln gelten bei Web-Komponenten standardmäßig nur "lokal" im Bereich der Komponente und haben fixe Werte. "Globalere" Geltungsbereiche (cross-scope styling) und Änderungen können jedoch auch realisiert werden.   Mehr »
Welche Aspekte sind bei mehrsprachlichen Informationsangeboten besonders relevant?
Von: @VB <2016-10-03>
Bei der Nutzung und dem Betrieb mehrsprachlicher Informationssysteme und Internetpräsenzen sind einige Anforderungen zu beachten. In diesem Dokument werden sie aus der Anwender- und Betreiber-Perspektive diskutiert.   Mehr »
Die Bildrechte werden in der Online-Version angegeben.For copyright notice look at the online version.

Bildrechte zu den in diese Datei eingebundenen Bild-Dateien:

Hinweise:
1. Die Bilder sind in der Reihenfolge ihres ersten Auftretens (im Quelltext dieser Seite) angeordnet.
2. Beim Anklicken eines der nachfolgenden Bezeichnungen, wird das zugehörige Bild angezeigt.
3, Die Bildrechte-Liste wird normalerweise nicht mitgedruckt,
4. Bildname und Rechteinhaber sind jeweils im Dateinamen des Bildes enthalten.