Heim > Artikel > Web-Frontend > So ändern Sie die Textgröße in CSS automatisch
So ändern Sie die Textgröße in CSS automatisch
- WBOYOriginal
- 2021-12-10 15:51:006627Durchsuche
In CSS können Sie das Attribut „font-size“ und die vw-Einheit verwenden, um die Größe des Textes automatisch zu ändern. Das Attribut „font-size“ wird verwendet, um die Größe der Schriftart automatisch festzulegen Ändern Sie die Größe entsprechend der Breite des Ansichtsfensters, d. h. lassen Sie die Größe des Textes automatisch ändern. Die Syntax lautet „Textelement {Schriftgröße: Wert vw;}“.
Die Betriebsumgebung dieses Tutorials: Windows 10-System, CSS3- und HTML5-Version, Dell G3-Computer.
So ändern Sie automatisch die Textgröße in CSS
In CSS können Sie die VW-Einheit verwenden, um die Textgröße automatisch zu ändern.
vw ist ein CSS-Attribut, ähnlich wie px, rem usw., und eine Längeneinheit. Im Browser gilt: 1 vw = Breite des Ansichtsfensters/100
Gemäß dieser Funktion kann vw uns bei der Implementierung des mobilen adaptiven Layouts helfen. Sein Vorteil besteht darin, dass das, was Sie sehen, das ist, was Sie erhalten, sogar besser als rem, da keine zusätzlichen Berechnungen erforderlich sind erforderlich. .
Es wird empfohlen, es mit CSS-Vorverarbeitungssprachen wie sass und weniger zu verwenden, da es Variablen und Funktionen definieren kann, was eine große Hilfe bei der Verwendung von vw darstellt.
Das Beispiel sieht wie folgt aus:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
p{
font-size:5vw;
}
</style>
</head>
<body>
<p>文字自动改变大小</p>
</body>
</html>Ausgabeergebnis:
(Teilen von Lernvideos: CSS-Video-Tutorial)
Das obige ist der detaillierte Inhalt vonSo ändern Sie die Textgröße in CSS automatisch. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!