CSS-Einheiten
CSS hat mehrere verschiedene Einheiten zur Angabe von Längen.
Einige CSS-Eigenschaften, die Längen festlegen, sind width, margin, padding, font-size, border-width usw.
Eine Länge besteht aus einer Zahl und einer Einheit, z. B. 10px, 2em usw.
Zwischen der Zahl und der Einheit darf kein Leerzeichen stehen. Wenn der Längenwert 0 ist, kann die Einheit weggelassen werden.
Bei einigen CSS-Eigenschaften können Längen negativ sein.
Es gibt zwei Arten von Längeneinheiten: relative und absolute.
Browser-Unterstützung
Die Zahlen in der Tabelle unten geben die minimale Browserversion an, die diese Längeneinheit unterstützt.
| Längeneinheiten | Chrome | IE | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| em, ex, %, px, cm, mm, in, pt, pc | 1.0 | 3.0 | 1.0 | 1.0 | 3.5 |
| ch | 27.0 | 9.0 | 1.0 | 7.0 | 20.0 |
| rem | 4.0 | 9.0 | 3.6 | 4.1 | 11.6 |
| vh, vw | 20.0 | 9.0 | 19.0 | 6.0 | 20.0 |
| vmin | 20.0 | 9.0* | 19.0 | 6.0 | 20.0 |
| vmax | 26.0 | Nicht unterstützt | 19.0 | Nicht unterstützt | 20.0 |
Hinweis:Internet Explorer 9 unterstützt vmin über den nicht standardmäßigen Namen vm.
Relative Länge
Relative Längeneinheiten geben eine Länge relativ zu einer anderen Längeneigenschaft an. Relative Längen sind für verschiedene Geräte besser geeignet.
| Einheit | Beschreibung | Online-Beispiele |
|---|---|---|
| em | Es beschreibt die Schriftgröße relativ zum aktuellen Element, auf das es angewendet wird, daher ist es auch eine relative Längeneinheit. Im Allgemeinen beträgt die Standard-Schriftgröße des Browsers 16px, also 2em == 32px. | Selbst ausprobieren |
| ex | Hängt von der Höhe des kleinen englischen Buchstabens x ab | Selbst ausprobieren |
| ch | Die Breite der Ziffer 0 | |
| rem | rem ist die Abkürzung für root em. Wenn rem auf ein Nicht-Wurzelelement wirkt, ist es relativ zur Schriftgröße des Wurzelelements; wenn rem auf die Schriftgröße des Wurzelelements wirkt, ist es relativ zu seiner anfänglichen Schriftgröße. | Selbst ausprobieren |
| vw | Viewport Width, Viewport-Breite, 1vw = 1% der Viewport-Breite. | Selbst ausprobieren |
| vh | Viewport Height, Viewport-Höhe, 1vh = 1% der Viewport-Höhe. | Selbst ausprobieren |
| vmin | Der kleinere von vw und vh. | Selbst ausprobieren |
| vmax | Der größere von vw und vh. | Selbst ausprobieren |
| % |
 |
Tipp:Was ist der Unterschied zwischen rem und em? Der Unterschied besteht darin, dass es weiterhin eine relative Größe ist, wenn rem zum Festlegen der Schriftgröße eines Elements verwendet wird, aber sie ist nur relativ zum HTML-Wurzelelement. |
|---|
Absolute Länge
Absolute Längeneinheiten sind feste Werte, die eine reale physische Größe widerspiegeln. Absolute Längeneinheiten hängen vom Ausgabemedium ab und nicht von der Umgebung (Anzeige, Auflösung, Betriebssystem usw.).
| Einheit | Beschreibung | Online-Beispiele |
|---|---|---|
| cm | Zentimeter | Selbst ausprobieren |
| mm | Millimeter | Selbst ausprobieren |
| in | Zoll (1in = 96px = 2.54cm) | Selbst ausprobieren |
| px * | Pixel (1px = 1/96 von 1in) | Selbst ausprobieren |
| pt | Punkt, ungefähr 1/72 Zoll; (1pt = 1/72in) | Selbst ausprobieren |
| pc | Pica, ungefähr 12pt, 1/6 Zoll; (1pc = 12 pt) | Selbst ausprobieren |
Pixel können als die besten "Gerätepixel" angesehen werden, aber diese Pixellänge hat nichts mit den Bildschirmpixeln des Textes zu tun, den Sie auf einem Display sehen. px ist tatsächlich eine Einheit, die durch einen Winkel gemessen wird.
Weitere Erweiterungen