Verschiedenste CSS Einheiten (Folge 35)
In CSS gibt es verschiedenste Einheiten. Du lernst in dieser Episode den Unterschied zwischen relativen und absoluten Einheiten. Und du bekommst eine klare Empfehlung, welche Einheiten du in deinem Projekt nutzen solltest.
Alle CSS Einheiten lassen sich in die Kategorie absolute oder relative Einheiten unterteilen. Zu den absoluten Einheiten gehören Pixel (px) oder Points (pt). Diese Maßzahlen geben eine absolute Größe für die Darstellung und das unabhängig von anderen Elementen. Relative Einheiten berechnen die dazustellende Größe anhand von anderem Element auf der Seite oder der Bildschirmgröße. Zu den relativen Einheiten gehören u. a. Prozent (%), Schriftgröße (EM, REM) und Viewport (VH, VW).
EM und REM berechnen die absoluten Maße anhand der Schriftgröße. 2EM ist daher das doppelte der Schriftgröße. EM bezieht sich bei der Schriftgröße auf dasselbe Element und REM dagegen auf die Standard-Schriftgröße, die im Browser eingestellt werden kann. Der Default-Wert der Standard-Schriftgröße ist 16px. Die Viewport-Einheiten berechnen die tatsächliche Größe anhand des Sichtbereichs des Nutzers. 30VH entspricht damit 30 % des Sichtbereichs gemessen an der Höhe (VW anhand der Breite).
Zu empfehlen sind relative Einheiten, da durch die Änderung der Standard-Schriftgröße oder des Zooms das Layout der Seite konstant bleibt. Verschiedene Einheiten können mit der CSS-Funktion calc() gemischt werden.
Schau dir doch auch die Episode zu dem perfekten Bild an. Dies geht auf verschiedenste Optimierungen für verschiedene Bildschirme ein.
Bitte empfehle den Podcast auch an Arbeitskollegen, Freunde und Bekannte weitere. Ich freue mich über jeden Höher.
Du möchtest großartige Angular Anwendungen schreiben? Kennst du die fünf kritischen Elemente, die notwendig sind für eine erfolgreiche Softwareentwicklung mit Angular? Der Angular Coding Blueprint liefert dir nicht nur alle Details zu den fünf Elementen wie Programmieren und Tests, sondern auch den Prozess erfolgreicher Softwareentwicklung. Du kannst dir den Angular Coding Blueprint hier herunterladen:
http://bit.ly/angular-blueprint
Abonniere den Podcast auf iTunes 🎧: http://apple.co/2OlOKQI
Ich freue mich, wenn du dir ein paar Minuten Zeit nimmst und diesen Podcast auf iTunes bewertest.
Xing: http://bit.ly/sd-xing
Facebook: http://bit.ly/angular-facebook
