Der Unterschied zwischen vw und vh in CSS: Die vw-Einheit kann die Größe automatisch entsprechend der Fensterbreite ändern, „1vw“ ist „1 %“ der Fensterbreite; die vh-Einheit kann die Größe automatisch entsprechend ändern die Höhe des Fensters, „1vh“ ist das Fenster „1 %“ der Höhe.
Die Betriebsumgebung dieses Tutorials: Windows 10-System, CSS3- und HTML5-Version, Dell G3-Computer.
Was ist der Unterschied zwischen vw und vh in CSS?
In CSS ist der Unterschied zwischen vw und vh:
Die VW-Einheit kann die Größe automatisch entsprechend der Breite des Fensters ändern. 1vw ist 1 % der Fensterbreite;
vh-Einheit kann die Größe automatisch entsprechend der Fensterhöhe ändern, 1vh ist 1 % der Fensterhöhe;
vw ist ein CSS-Attribut, ähnlich wie px, rem usw. und gehört zur 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.
vm, vh, vmin, vmax sind Fenstereinheiten und relative Einheiten. Es ist nicht relativ zum übergeordneten Knoten oder zum Stammknoten der Seite. Sie wird durch die Größe des Ansichtsfensters bestimmt. Die Einheit ist 1, was etwa 1 % bedeutet. Der Ansichtsbereich ist der Bereich Ihres Browsers, der tatsächlich Inhalte anzeigt – mit anderen Worten, Ihr Webbrowser ohne Symbolleisten und Schaltflächen.
Die spezifische Beschreibung lautet wie folgt:
vw: Der Prozentsatz der Fensterbreite (1vw bedeutet, dass die Breite des Fensters 1 % beträgt).
vh: Der Prozentsatz der Fensterhöhe.
vmin: Nehmen Sie den kleineren Wert von das aktuelle Vw und Vh
vmax: Nehmen Sie den größeren Wert des aktuellen Vw und Vh
Die Höhe und Breite von vh und vw relativ zum Ansichtsfenster, 1vh ist gleich 1/100 der Höhe des Ansichtsfensters, 1vw ist gleich 1/100 der Breite des Ansichtsfensters. Zum Beispiel: Durchsuchen Die Höhe des Rahmens beträgt 900 Pixel, die Breite beträgt 750 Pixel, 1 VH = 900 Pixel/100 = 9 Pixel, 1VW = 750 Pixel/100 = 7,5 Pixel, es ist leicht zu realisieren Box mit der gleichen Höhe wie der gleiche Bildschirm.
Das Beispiel sieht wie folgt aus:
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>vh_CSS参考手册_web前端开发参考手册系列</title>
<style>
.p1{font-size:5vh;}
.p2{font-size:5vw;}
</style>
</head>
<body>
<p class="p1">相对于viewport高度大小的文字</p>
<p class="p2">相对于viewport宽度大小的文字</p>
</body>
</html>Ausgabeergebnis:
(Lernvideo-Sharing: CSS-Video-Tutorial)
Das obige ist der detaillierte Inhalt vonWas ist der Unterschied zwischen vw und vh in CSS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
'CSS4' UpdateApr 11, 2025 pm 12:05 PMDa 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 PMJedes 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 AMIch 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 AMAlles, was Sie schon immer über Datenattribute in HTML, CSS und JavaScript wissen wollten.
Unveränderlichkeit im JavaScript verstehenApr 11, 2025 am 11:47 AMWenn 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 AMEs 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 AMEs 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 AMHaben 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
Heiße KI -Werkzeuge
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Undress AI Tool
Ausziehbilder kostenlos
Clothoff.io
KI-Kleiderentferner
AI Hentai Generator
Erstellen Sie kostenlos Ai Hentai.
Heißer Artikel
Heiße Werkzeuge
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Herunterladen der Mac-Version des Atom-Editors
Der beliebteste Open-Source-Editor
Dreamweaver CS6
Visuelle Webentwicklungstools
ZendStudio 13.5.1 Mac
Leistungsstarke integrierte PHP-Entwicklungsumgebung
EditPlus chinesische Crack-Version
Geringe Größe, Syntaxhervorhebung, unterstützt keine Code-Eingabeaufforderungsfunktion
