Verschiedenste CSS Einheiten
04/02/19 • 11 min
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.
Webseite: http://bit.ly/happy-angular
Xing: http://bit.ly/sd-xing
Facebook: http://bit.ly/angular-facebook
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.
Webseite: http://bit.ly/happy-angular
Xing: http://bit.ly/sd-xing
Facebook: http://bit.ly/angular-facebook
Vorherige Episode
Promis vs. Observable?
Die häufigsten Fragen in Angular
Die häufigste Frage in Angular lautet: Was ist der Unterschied zwischen Promis und Observable? In dieser Folge beantworte ich dir diese Frage und gegeben dir Praxis erprobte Strategien an die Hand.
Unterschied zwischen Promis und Observable – kurz zusammengefasst:
- Gemeinsamkeit: Beide bietet eine nützliche Hilfestellung um mit asynchronem Programmausführungen umzugehen.
- Promise behandeln ein Event, können nicht vorzeitig beendet werden und im Standard enthalten
- Observables behandeln ein Strom aus Events, können vorzeitig beendet werden, zahlreiche Operationen stehen bereit und sind in der Library RxJS enthalten.
Ich empfehle dir, höre dir die Folge an. Du bekommst die Unterschiede mit praktischen Vergleichen erklärt. Bitte teile diese Folge auch an Kollegen.
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.
Webseite: http://bit.ly/happy-angular
Xing: http://bit.ly/sd-xing
Facebook: http://bit.ly/angular-facebook
Nächste Episode
Zu viele Dateien in meinem Angular-Projekt?
Die häufigsten Fragen in Angular
Was steckt in dem node_modules Ordner? Jede Angular-Anwendung hat Abhängigkeiten zu anderen Frameworks wie Angular. Um die Anwendung auszuführen, benötigen wir diese Abhängigkeiten lokal. Und genau diese Dateien werden in dem node_modules Ordner abgelegt. Die Abhängigkeiten installieren wir lokal mit dem Befehl npm install.
Wenn wir unsern Codestand nur kopieren oder in GIT einchecken, ist der Inhalt des node_modules Ordner unwichtig. Die Abhängigkeiten definieren wir in der package.json Datei. Jeder Entwickler kann mit dem Befehl npm install (oder kurz npm i) die Abhängigkeiten lokal laden. Dafür ist eine Internet-Verbindung notwendig.
Wenn du Fragen hast, dann schicke mir gerne E-Mail oder hinterlasse mir einen Kommentar.
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.
Webseite: http://bit.ly/happy-angular
Xing: http://bit.ly/sd-xing
Facebook: http://bit.ly/angular-facebook
Wenn dir diese Episode gefällt, wirst du lieben
Kommentare zur Episode
Badge generieren
Erhalte ein Badge für deine Webseite, das auf diese episode
<a href="https://goodpods.com/podcasts/happy-angular-kompaktes-angular-wissen-zum-mitnehmen-511443/verschiedenste-css-einheiten-66964812"> <img src="https://storage.googleapis.com/goodpods-images-bucket/badges/generic-badge-1.svg" alt="listen to verschiedenste css einheiten on goodpods" style="width: 225px" /> </a>
Kopieren