CSS-Einheiten
CSS hat mehrere unterschiedliche Einheiten für eine Länge exprimieren.
Viele CSS - Eigenschaften nehmen "length" Werte wie Breite, Marge, Polsterung, font-size, border-width usw.
Die Länge ist eine Zahl mit einer Längeneinheit gefolgt, wie 10px, 2em usw.
Ein Leerzeichen kann nicht zwischen der Anzahl und dem Gerät angezeigt werden. Wenn jedoch der Wert 0 ist, kann die Einheit weggelassen werden.
Für einige CSS-Eigenschaften werden negative Längen erlaubt.
Es gibt zwei Arten von Längeneinheiten: relative und absolute.
Browser-Unterstützung
Die Zahlen in der Tabelle geben Sie die erste Browser-Version, die die Längeneinheit voll unterstützt.
| Länge Einheit | |||||
|---|---|---|---|---|---|
| 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 |
Note: Internet Explorer 9 unterstützt mit dem Nicht-Standard - Name vmin: vm.
Relative Längen
Relative Längeneinheiten geben Sie eine Länge relativ zu einer anderen Eigenschaft length. Relative Längeneinheiten skaliert besser zwischen verschiedenen Rendering-Medien.
| Einheit | Beschreibung |
|---|---|
| em | In Bezug auf die Schriftgröße des Elements (2em means 2 times the size of the current font) - (2em means 2 times the size of the current font) Probieren Sie es aus |
| ex | Bezogen auf die x-Höhe der aktuellen Schriftart (rarely used) Probieren Sie es aus |
| ch | Relativ zur Breite des "0" (zero) |
| rem | Relativ zur Schriftgröße des Wurzelelements |
| vw | Bezogen auf 1% der Breite des Ansichtsfensters * Probieren Sie es aus |
| vh | Bezogen auf 1% der Höhe des Darstellungs * Probieren Sie es aus |
| vmin | Bezogen auf 1% des Ansichtsfensters * kleinere Dimension Try it |
| vmax | Bezogen auf 1% des Ansichtsfensters * größere Dimension Ausprobieren |
| % |
Tip: Die em und rem Einheiten sind praktisch perfekt skalierbare Layout zu schaffen!
* Ansichtsfenster = die Größe des Browserfensters. Wenn das Ansichtsfenster ist 50 cm breit, 1vw = 0,5 cm.
Absolute Längen
Die absoluten Längeneinheiten festgelegt sind und eine Länge ausgedrückt in einer dieser Punkte, wie genau dieser Größe angezeigt.
Absolute Längeneinheiten sind nicht für den Einsatz auf dem Bildschirm zu empfehlen, da Bildschirmgrößen so viel variieren. Sie können jedoch verwendet werden, wenn das Ausgabemedium bekannt ist, wie beispielsweise für Drucklayout.
| Einheit | Beschreibung |
|---|---|
| cm | Zentimeter Probieren Sie es aus |
| mm | Millimeter Probieren Sie es aus |
| in | Zoll (1in = 96px = 2.54cm) Probieren Sie es aus |
| px * | Pixel (1px = 1/96th of 1in) Probieren Sie es aus |
| pt | Punkte (1pt = 1/72 of 1in) Probieren Sie es aus |
| pc | Pica (1pc = 12 pt) Probieren Sie es aus |
* Pixel (px) sind in Bezug auf die Betrachtungsvorrichtung. Für Low-dpi - Geräte, 1px ist ein Gerätepixel (dot) des Displays. Für Drucker und hochauflösende Bildschirme impliziert 1px mehrere Geräte Pixel.