CSS-Einheiten
Geben Sie einen Wert ein und wählen Sie die Einheit, dann erscheint dieselbe Größe in allen CSS-Einheiten, bereit zum Kopieren.
Dieselbe Größe in anderen Einheiten
- 1.5remWurzelschriftgröße
- 1.5emSchriftgröße des Elternelements
- 150%Prozent der Schriftgröße des Elternelements
- 18ptPunkt
- 1.5pcPica
- 0.25inZoll
- 0.635cmZentimeter
- 6.35mmMillimeter
- 25.4QViertelmillimeter
- 1.6667vwProzent der Viewport-Breite
- 2.6667vhProzent der Viewport-Höhe
- 2.6667vminProzent der kürzeren Viewport-Seite
- 1.6667vmaxProzent der längeren Viewport-Seite
Kontext
PX in REM bei 16 px
| px | rem | pt |
|---|---|---|
| 10px | 0.625rem | 7.5pt |
| 12px | 0.75rem | 9pt |
| 14px | 0.875rem | 10.5pt |
| 16px | 1rem | 12pt |
| 18px | 1.125rem | 13.5pt |
| 20px | 1.25rem | 15pt |
| 24px | 1.5rem | 18pt |
| 28px | 1.75rem | 21pt |
| 32px | 2rem | 24pt |
| 36px | 2.25rem | 27pt |
| 40px | 2.5rem | 30pt |
| 48px | 3rem | 36pt |
| 64px | 4rem | 48pt |
Ein Punkt wird als 1,333 px gerechnet, da ein Zoll 96 px und 72 pt entspricht. Umgekehrt ist ein Pixel 0,75 pt.
So funktioniert es
Rem bezieht sich auf die Schriftgröße des html-Elements, die in allen Browsern 16 px beträgt, solange sie niemand ändert. 24 px sind also 1,5 rem. Wer html { font-size: 62.5% } setzt, erhält 10 px pro rem und leichteres Kopfrechnen, ändert damit aber auch alles, was auf der Standardgröße aufbaut.
Em bezieht sich auf die Schriftgröße des Elternelements und multipliziert sich daher bei verschachtelten Elementen: 1,2 em innerhalb von 1,2 em ergibt das 1,44-Fache. Prozent bei font-size funktioniert genauso, wobei 100 % gleich 1 em sind. Prozent bei Breiten oder Abständen bezieht sich dagegen auf den umgebenden Block und wird hier nicht umgerechnet.
Rem ist die übliche Wahl für Schriftgrößen und Abstände, weil die Seite dann der Größe folgt, die Besucher im Browser eingestellt haben. Px bei Schriftgrößen verhindert das Zoomen nicht, übergeht aber diese Einstellung, worauf die WCAG-Hinweise zur Textgrößenänderung eingehen.
Vw und vh sind ein Prozent der Breite und Höhe des Viewports, vmin und vmax ein Prozent seiner kürzeren und längeren Seite. Die Werte hängen ganz vom Fenster ab, daher übernimmt die Schaltfläche die Größe des Fensters, das Sie gerade verwenden. Auf Smartphones kann sich vh ändern, wenn die Adressleiste erscheint; dvh, svh und lvh lösen das.
Pt, pc, in, cm, mm und Q sind absolute Einheiten mit festen Verhältnissen in CSS: Ein Zoll sind 96 px, 72 pt und 2,54 cm. Auf dem Bildschirm sind das selten echte Zentimeter, weil ein CSS-Pixel kein physisches Pixel ist. Am nützlichsten sind sie in Druck-Stylesheets.
Die Werte werden mit Dezimalpunkt und höchstens vier Nachkommastellen geschrieben, wie CSS es verlangt.