So ändern Sie die Textgröße in CSS automatisch-CSS-Tutorial-php.cn

Heim

Web-Frontend

CSS-Tutorial

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Dec 10, 2021 pm 03:51 PM

css

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>

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!

Stellungnahme

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

Verwandter Artikel

'CSS4' UpdateApr 11, 2025 pm 12:05 PM

Da ich das CSS4¹ zum ersten Mal eingemischt habe, gab es eine Menge mehr Diskussion darüber. Ich werde meine Lieblingsgedanken von anderen hier zusammenschließen. Es gibt

Die drei Arten von CodeApr 11, 2025 pm 12:02 PM

Jedes Mal, wenn ich ein neues Projekt starte, organisiere ich den Code, den ich in drei Typen oder Kategorien betrachte, wenn Sie möchten. Und ich denke, diese Typen können auf angewendet werden

Https ist einfach!Apr 11, 2025 am 11:51 AM

Ich war schuldig, die Komplexität von Https öffentlich beklagt zu haben. In der Vergangenheit hat ich SSL-Zertifikate von Drittanbietern gekauft und hatte Probleme

HTML -DatenattributehandbuchApr 11, 2025 am 11:50 AM

Alles, was Sie schon immer über Datenattribute in HTML, CSS und JavaScript wissen wollten.

Unveränderlichkeit im JavaScript verstehenApr 11, 2025 am 11:47 AM

Wenn Sie in JavaScript noch nicht mit Unveränderlichkeit gearbeitet haben, ist es möglicherweise einfach, sie mit der Zuweisung einer Variablen für einen neuen Wert oder einer Neuzuweisung zu verwechseln.

Benutzerdefinierte Styling -Formulareingaben mit modernen CSS -FunktionenApr 11, 2025 am 11:45 AM

Es ist durchaus möglich, benutzerdefinierte Kontrollkästchen, Optionsfelder und Schalter zu erstellen und gleichzeitig semantisch und zugänglich zu bleiben. Wir brauchen nicht einmal eine

FußnoteApr 11, 2025 am 11:34 AM

Es gibt spezielle Superset -Nummer -Charaktere, die manchmal perfekt für Fußnoten sind. Hier sind sie:

So erstellen Sie einen animierten Countdown -Timer mit HTML, CSS und JavaScriptApr 11, 2025 am 11:29 AM

Haben Sie jemals einen Countdown -Timer für ein Projekt benötigt? Für so etwas ist es möglicherweise natürlich, nach einem Plugin zu greifen, aber es ist tatsächlich viel mehr

See all articles