Absolute vs. Relative Einheiten
CSS-Einheiten fallen in zwei Kategorien. Absolute Einheiten (px, pt, cm, mm, in) haben feste physische Grossen. Relative Einheiten (rem, em, %, vw, vh) skalieren basierend auf dem Kontext wie Schriftgrosse oder Viewport-Dimensionen. Relative Einheiten sind wesentlich fur responsives Webdesign, da sie sich an verschiedene Bildschirme und Benutzereinstellungen anpassen.
rem und em Verstehen
rem referenziert die Schriftgrosse des Wurzelelements; wenn html font-size: 16px hat, dann entspricht 1rem uberall 16px. em referenziert die Schriftgrosse des Elternelements, was bedeutet, dass verschachtelte em-Werte sich kumulieren. Die meisten modernen Frameworks bevorzugen rem fur Konsistenz und Vorhersagbarkeit in tief verschachtelten Komponenten.
Viewport-Einheiten: vw und vh
1vw entspricht 1% der Viewport-Breite; 1vh entspricht 1% der Viewport-Hohe. Diese Einheiten sind leistungsstark fur Vollbild-Layouts, responsive Typografie und Abstande, die mit dem Browserfenster skalieren. Seien Sie vorsichtig auf Mobilgeraten, wo die Adressleiste die Viewport-Hohe beeinflussen kann.
Wann Physische Einheiten Verwenden
Physische Einheiten wie pt, cm, mm und in sind fur Druckmedien bestimmt. Punkte (pt) sind Standard in der Drucktypografie, wo 72pt einem Zoll entsprechen. Verwenden Sie physische Einheiten in @media print Stylesheets; vermeiden Sie sie fur Bildschirm-Layouts, da die DPI zwischen Geraten variiert.
