CSS/Wertetypen/Maßangaben/Viewportabmessungen
Text-Info
- 15min
- leicht
- • Längenangaben in CSS
Mit den Viewportabmessungen (Viewport Units) vw
(viewport width) und vh
(viewport height) können Sie Abmessungen in Relation zum allerersten umschließenden Block (initial containing block) festlegen. Für Darstellungen auf Bildschirmen ist dieser Block identisch mit den Viewportabmessungen, im Drucklayout entspricht er dem bedruckbaren Bereich einer Seite.
Details: caniuse.com
.beispiel1 {
width: 25vh;
height: 25vh;
}
Inhaltsverzeichnis
passende Schriftgrößen[Bearbeiten]
Mit der Einheit vw
können Sie die Schriftgröße an die verfügbare Viewportgröße anpassen, sodass Schrift selbst auf kleinen Viewports immer lesbar bleibt.
body {
font-size: 2vw;
}
h1 {
font-size: 5vw;
}
Größe abhängig vom Seitenverhältnis[Bearbeiten]
Mit den Einheiten vmin
und vmax
können Sie die Größe abhängig vom Seitenverhältnis definieren.
vm
anstelle von vmin
.Der Internet Explorer 10 unterstützt den Wert vmax
nicht.
vh
-Einheit problematisch.