Heim > Artikel > Web-Frontend > So verwenden Sie die neuen CSS-Einheiten vw und vh im responsiven Design

So verwenden Sie die neuen CSS-Einheiten vw und vh im responsiven Design

高洛峰Original: 2017-03-23 10:53:051732Durchsuche

Unter Berücksichtigung zukünftiger Responsive-Design-Entwicklungen kann die Browserhöhe bei Bedarf auch anhand von Prozentwerten angepasst werden. Die Verwendung prozentualer Werte ist jedoch nicht immer die beste Möglichkeit, die Größe des Browserfensters zu definieren. Beispielsweise ändert sich die Schriftgröße nicht, wenn sich Ihr Fenster ändert. Die in CSS3 eingeführten neuen Einheiten lösen dieses Problem eindeutig .

Die von CSS3 eingeführten Werte „vw“ und „vh“ basieren auf der Breite/Höhe relativ zur Fenstergröße, „vw“ = „Ansichtsbreite“, „vh“ = „Ansichtshöhe“; Rufen Sie die zulässige Fenstereinheit auf. Wir definieren die Größe näher am Browserfenster. Sehen Sie sich den Demo-Fall an, um die CSS-Stile der folgenden vier Container zu vergleichen:

.demo {
   width: 100vw;
   font-size: 10vw; /* 宽度为窗口100%， 字体大小为窗口的10% */
}
.demo2 {
   width: 80vw;
   font-size: 8vw; /* 宽度为窗口80%， 字体大小为窗口的8% */
}
.demo3 {
   width: 50vw;
   font-size: 5vw; /* 宽度为窗口50%， 字体大小为窗口的5% */
}
.demo4 {
   width: 10vw;
   height: 50vh; /* 宽度为窗口10%， 容器高度为窗口的50% */
}
html代码：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<link href="test.css" rel="stylesheet" type="text/css" />
</head>
<div class="demo">1</div>
<div class="demo2">2</div>
<div class="demo3">3</div>
<div class="demo4">4</div>
</html>

Sie können das Demo-Fenster verkleinern, um die Änderungen in verschiedenen Größen zu sehen. Derzeit unterstützt diese CSS3-Anwendung alle gängigen Browser und IE muss 10 oder höher sein.

Das obige ist der detaillierte Inhalt vonSo verwenden Sie die neuen CSS-Einheiten vw und vh im responsiven Design. 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

Vorheriger Artikel：Detaillierte grafische Erklärung von CSS Basic Clear FloatNächster Artikel：Detaillierte grafische Erklärung von CSS Basic Clear Float

In Verbindung stehende Artikel

Mehr sehen