Startseite Skripte für das Wintersemester 2018/19 Webdesign Interaction, Webfonts, Webtypografie Flexible Schriftgrößen Einheiten


Flexible Schriftgrößen Einheiten

Nützt man eine dieser neuen Größenangaben, passt sich auch die Textgröße an den zur Verfügung stehenden Platz an!

Schaut Euch die Demo an!

viewport = Fläche innerhalb des Browserfensters

1vw     =   1% der viewport Breite
1vh     =   1% der viewport Höhe
1vmin   =   1vw oder 1vh, je nach dem, was davon **kleiner** ist
1vmax   =   1vw oder 1vh, je nach dem, was davon **größer** ist

CSS

.vw {
    font-size: 5vw;
}

.vh {
    font-size: 5vh;
}

.vmin {
    font-size: 5vmin;
}

.vmax {
    font-size: 5vmax;
}

Man kann damit nicht nur die Größe von Text sondern auch von anderen HTML-Elementen festlegen!