Viewport-Einheiten

Teil des Abschnitts Styling with CSS der HTML-Journey von Coddy — Lektion 64 von 76.

In CSS sind Viewport-Einheiten relative Maßeinheiten, die auf der Größe des Viewports des Browsers (dem sichtbaren Bereich der Webseite) basieren. Sie bieten eine Möglichkeit, responsive Designs zu erstellen, indem Elemente und Text proportional zur Breite oder Höhe des Viewports dimensioniert werden. Viewport-Einheiten sind besonders nützlich für die Erstellung flüssiger Layouts, die Skalierung von Text und die Positionierung von Elementen auf eine Weise, die sich an verschiedene Bildschirmgrößen anpasst.

Es gibt vier Viewport-Einheiten:

vw (Viewport-Breite): Entspricht 1 % der Breite des Viewports. Zum Beispiel entspricht 10vw 10 % der Viewport-Breite.

vh (Viewport-Höhe): Entspricht 1 % der Viewport-Höhe. Zum Beispiel entspricht 25vh 25 % der Viewport-Höhe.

vmin (Viewport-Minimum): Repräsentiert 1 % der kleineren Dimension des Viewports (Breite oder Höhe). Wenn der Viewport beispielsweise breiter als hoch ist, entspricht 5vmin 5 % der Viewport-Höhe.

vmax (Viewport-Maximum): Repräsentiert 1 % der größeren Dimension des Viewports (Breite oder Höhe). Zum Beispiel, wenn der Viewport breiter als hoch ist, entspricht 8vmax 8 % der Viewport-Breite.

Hier ist die grundlegende Syntax für die Verwendung von Viewport-Einheiten:

selector {
    property: value;
}

selector: Der CSS-Selektor, der die HTML-Elemente anspricht, die Sie stylen möchten.

property: Die CSS-Eigenschaft, die Sie festlegen möchten (z. B. width, height, font-size, margin, padding).

value: Ein Wert, der Viewport-Einheiten enthält (z. B. 50vw, 75vh, 10vmin, 5vmax).

Zum Beispiel:

.box {
    width: 50vw; /* Die Boxbreite entspricht 50 % der Viewport-Breite */
    height: 30vh; /* Die Boxhöhe entspricht 30 % der Viewport-Höhe */
}

In diesem Beispiel hat das .box-Element eine Breite von 50vw und eine Höhe von 30vh, wodurch es sowohl auf die Breite als auch auf die Höhe des Viewports reagiert.

Aufgabe

Einfach

Dir wird ein HTML-Dokument mit einer Überschrift (<h1>), einem Absatz (<p>) und einem Bereich (<div>) gegeben. Deine Aufgabe ist es, Viewport-Einheiten zu verwenden, um diese Elemente responsiv zu gestalten. Befolge die folgenden Schritte:

Schreibe eine CSS-Regel, die das <h1>-Element anspricht. Setze dessen font-size auf 6vw.
Schreibe eine CSS-Regel, die das <p>-Element anspricht. Setze dessen font-size auf 4vmin.
Schreibe eine CSS-Regel, die das <div>-Element anspricht. Setze dessen width auf 80vw und dessen height auf 50vh.

Spickzettel

Viewport-Einheiten sind relative Einheiten, die auf der Viewport-Größe des Browsers basieren und nützlich für die Erstellung responsiver Designs sind.

Vier Viewport-Einheiten:

vw (viewport width): 1% der Viewport-Breite
vh (viewport height): 1% der Viewport-Höhe
vmin (viewport minimum): 1% der kleineren Viewport-Dimension
vmax (viewport maximum): 1% der größeren Viewport-Dimension

Grundlegende Syntax:

selector {
    property: value;
}

Beispiel:

.box {
    width: 50vw; /* 50% der Viewport-Breite */
    height: 30vh; /* 30% der Viewport-Höhe */
}

Probier es selbst

<html>
<head>
    <title>Viewport Units</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body style="background-color:lightblue">
    <h1>Antarctica</h1>  
    <p>The coldest continent, covered in ice and home to penguins and seals.</p>  
    <div>It has no permanent residents, only research stations.</div> 
</body>
</html>