Heim > Web-Frontend > CSS-Tutorial > Hauptteil

So ändern Sie die Textgröße in CSS automatisch

WBOY
Freigeben: 2021-12-10 15:51:00
Original
6632 Leute haben es durchsucht

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;}“.

So ändern Sie die Textgröße in CSS automatisch

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>
Nach dem Login kopieren

Ausgabeergebnis:

So ändern Sie die Textgröße in CSS automatisch

(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!

Verwandte Etiketten:
css
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage