CSS -Einheiten
CSS-Einheiten
CSS hat mehrere verschiedene Einheiten, um eine Länge auszudrücken.
Viele CSS-Eigenschaften nehmen "Längen"-Werte an, wie width, margin, padding,
font-size, usw.
Die Länge ist eine Zahl, gefolgt von einer Längeneinheit, wie 10px,
2em, usw.
Beispiel
Legen Sie verschiedene Längenwerte fest, indem Sie px (Pixel) verwenden:
h1 {
font-size: 60px;
}
p {
font-size: 25px;
line-height: 50px;
}
Hinweis: Zwischen der Zahl und der Einheit darf kein Leerzeichen stehen. Wenn der Wert jedoch ist
0, kann die Einheit weggelassen werden.
Für einige CSS-Eigenschaften sind negative Längen zulässig.
Es gibt zwei Arten von Längeneinheiten: absolute und relative .
Absolute Längen
Die absoluten Längeneinheiten sind festgelegt und eine in diesen ausgedrückte Länge erscheint als genau diese Größe.
Absolute Längeneinheiten werden für die Verwendung auf dem Bildschirm nicht empfohlen, da die Bildschirmgrößen sehr unterschiedlich sind. Sie können jedoch verwendet werden, wenn das Ausgabemedium bekannt ist, z. B. für das Drucklayout.
| Unit | Description |
|---|---|
| cm | centimeters |
| mm | millimeters |
| in | inches (1in = 96px = 2.54cm) |
| px * | pixels (1px = 1/96th of 1in) |
| pt | points (1pt = 1/72 of 1in) |
| pc | picas (1pc = 12 pt) |
* Pixel (px) beziehen sich auf das Anzeigegerät. Bei Geräten mit niedriger Auflösung entspricht 1 Pixel einem Gerätepixel (Punkt) der Anzeige. Für Drucker und Bildschirme mit hoher Auflösung impliziert 1 Pixel mehrere Gerätepixel.
Relative Längen
Relative Längeneinheiten geben eine Länge relativ zu einer anderen Längeneigenschaft an. Relative Längeneinheiten skalieren besser zwischen verschiedenen Rendering-Medien.
| Unit | Description | |
|---|---|---|
| em | Relative to the font-size of the element (2em means 2 times the size of the current font) | |
| ex | Relative to the x-height of the current font (rarely used) | |
| ch | Relative to width of the "0" (zero) | |
| rem | Relative to font-size of the root element | |
| vw | Relative to 1% of the width of the viewport* | |
| vh | Relative to 1% of the height of the viewport* | |
| vmin | Relative to 1% of viewport's* smaller dimension | |
| vmax | Relative to 1% of viewport's* larger dimension | |
| % | Relative to the parent element |
Tipp: Die Einheiten em und rem sind praktisch, um perfekt skalierbare Layouts zu erstellen!
* Viewport = die Größe des Browserfensters. Wenn das Ansichtsfenster 50 cm breit ist, ist 1 vw = 0,5 cm.
Browser-Unterstützung
Die Zahlen in der Tabelle geben die erste Browserversion an, die die Längeneinheit vollständig unterstützt.
| Length Unit | |||||
|---|---|---|---|---|---|
| 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 | 12.0 | 19.0 | 6.0 | 20.0 |
| vmax | 26.0 | 16.0 | 19.0 | 7.0 | 20.0 |