Jednostki viewportu

Część sekcji Stylizacja za pomocą CSS ścieżki HTML w Coddy. Lekcja 64 z 76.

W CSS jednostki viewportu to jednostki względne oparte na rozmiarze viewportu przeglądarki (widocznego obszaru strony internetowej). Umożliwiają tworzenie responsywnych projektów przez proporcjonalne dostosowywanie rozmiaru elementów i tekstu do szerokości lub wysokości viewportu. Jednostki viewportu są szczególnie przydatne do tworzenia płynnych układów, skalowania tekstu i pozycjonowania elementów w sposób dostosowujący się do różnych rozmiarów ekranu.

Istnieją cztery jednostki viewportu:

vw (szerokość obszaru roboczego): Oznacza 1% szerokości obszaru roboczego. Na przykład 10vw to 10% szerokości obszaru roboczego.

vh (wysokość obszaru widoku): Reprezentuje 1% wysokości obszaru widoku. Na przykład 25vh to 25% wysokości obszaru widoku.

vmin (minimum viewportu): Reprezentuje 1% mniejszego wymiaru viewportu (szerokości lub wysokości). Na przykład, jeśli viewport jest szerszy niż wyższy, 5vmin jest równoważne 5% wysokości viewportu.

vmax (maksymalny wymiar obszaru widoku): Reprezentuje 1% większego wymiaru obszaru widoku (szerokości lub wysokości). Na przykład, jeśli obszar widoku jest szerszy niż wyższy, 8vmax odpowiada 8% szerokości obszaru widoku.

Oto podstawowa składnia używania jednostek viewport:

selector {
    property: value;
}

selector: Selektor CSS wskazujący elementy HTML, które chcesz stylować.

property: właściwość CSS, którą chcesz ustawić (np. width, height, font-size, margin, padding).

value: Wartość obejmująca jednostki obszaru widoku (np. 50vw, 75vh, 10vmin, 5vmax).

Na przykład:

.box {
    width: 50vw; /* Szerokość elementu będzie wynosić 50% szerokości widoku */
    height: 30vh; /* Wysokość elementu będzie wynosić 30% wysokości widoku */
}

W tym przykładzie element .box ma szerokość 50vw i wysokość 30vh, dzięki czemu dostosowuje się zarówno do szerokości, jak i wysokości obszaru roboczego.

Wyzwanie

Łatwy

Otrzymujesz dokument HTML z nagłówkiem (<h1>), akapitem (<p>) i elementem <div>. Twoim zadaniem jest użycie jednostek viewportu, aby te elementy były responsywne. Wykonaj poniższe kroki:

Napisz regułę CSS, która wybiera element <h1>. Ustaw jego font-size na 6vw.
Napisz regułę CSS, która wybiera element <p>. Ustaw jego font-size na 4vmin.
Napisz regułę CSS, która wybiera element <div>. Ustaw jego width na 80vw, a jego height na 50vh.

Spróbuj swoich sił

<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>