Gewusst wie: Responsiver Text
Erfahren Sie, wie Sie mit CSS responsive Typografie erstellen.
Hallo Welt
Ändern Sie die Größe des Browserfensters, um zu sehen, wie die Schriftgröße skaliert wird.
Responsive Schriftgröße
Die Textgröße kann mit einer vw
Einheit, also der "Breite des Ansichtsfensters", eingestellt werden.
Auf diese Weise folgt die Textgröße der Größe des Browserfensters:
Beispiel
<h1 style="font-size:8vw;">Hello World</h1>
<p
style="font-size:2vw;">Resize the browser window to see how the font size
scales.</p>
Viewport ist die Größe des Browserfensters. 1vw = 1 % der Ansichtsfensterbreite. Wenn das Ansichtsfenster 50 cm breit ist, entspricht 1 vw 0,5 cm.
Ändern Sie die Schriftgröße mit Medienabfragen
Sie können auch Medienabfragen verwenden, um die Schriftgröße eines Elements auf bestimmten Bildschirmgrößen zu ändern:
Variable Schriftgröße.
Beispiel
/* If the screen size is 601px wide or
more, set the font-size of <div> to 80px */
@media screen and (min-width:
601px) {
div.example {
font-size: 80px;
}
}
/* If the screen size is 600px wide or less,
set the font-size of <div> to 30px */
@media screen and (max-width: 600px) {
div.example {
font-size: 30px;
}
}
Tipp: Besuchen Sie unser CSS-Font-Tutorial , um mehr über Schriftarten zu erfahren.
Um mehr über Medienabfragen zu erfahren, lesen Sie unser CSS Media Queries Tutorial .