Beispiel:CSS3 vw,vh.html
Aus SELFHTML-Wiki
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" media="screen" href="./Beispiel:SELFHTML-Beispiel-Grundlayout.css" />
<title>vh/vw</title>
<style>
.beispiel1,
.beispiel2,
.beispiel3,
.beispiel4 {
background: white;
border: 0 none;
margin: 2em auto;
padding: 2em;
overflow: hidden;
}
.beispiel1 code,
.beispiel2 code,
.beispiel3 code,
.beispiel4 code {
white-space: pre-line;
}
.beispiel1 {
height: calc(25vh - 2em);
width: calc(25vh - 2em);
}
.beispiel2 {
height: calc(25vw - 2em);
width: calc(25vw - 2em);
}
.beispiel3 {
height: calc(25vh - 2em);
width: calc(25vw - 2em);
}
.beispiel4 {
height: calc(25vw - 2em);
width: calc(25vh - 2em);
}
</style>
</head>
<body>
<h1>Verwendung von <code>vh</code>/<code>vw</code></h1>
<main>
<h2>Größenangaben in Relation zum Viewport</h2>
<section class="beispiel1">
<code>
width: 25vh;
height: 25vh;
</code>
<p>
Das Ergebnis ist ein Quadrat mit einer Seitenlänge
von 25% der insgesamt für den Anzeigebereich zur
Verfügung stehenden Höhe.
</p>
</section>
<section class="beispiel2">
<code>
width: 25vw;
height: 25vw;
</code>
<p>
Das Ergebnis ist ein Quadrat mit einer Seitenlänge
von 25% der insgesamt für den Anzeigebereich zur
Verfügung stehenden Breite.
</p>
</section>
<section class="beispiel3">
<code>
width: 25vw;
height: 25vh;
</code>
<p>
Dieses Rechteck ist eine zentrische Streckung des
Viewports mit dem Streckungsfaktor 0,25.
</p>
</section>
<section class="beispiel4">
<code>
width: 25vh;
height: 25vw;
</code>
<p>
Dieses Rechteck ist ebenfalls eine zentrische
Streckung des Viewports mit dem Streckungsfaktor
0,25, allerdings sind hier Breite und Höhe
vertauscht.
</p>
</section>
</main>
</body>
</html>
