CSS Academy · Lekcja

Jednostki obszaru widoku: vw, vh i dvh

Ustawią Państwo rozmiar elementów względem obszaru widoku przeglądarki, korzystając z jednostek vw, vh i nowoczesnej dvh.

Jednostki obszaru widoku: vw, vh i dvh to bezpłatna lekcja CSS Academy na CoddyKit. To lekcja 3 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej CSS Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs CSS Academy zawiera 4 lekcji w sumie.

Czym są jednostki widoku?

Jednostki widoku są względne względem rozmiaru obszaru widoku przeglądarki (widocznego obszaru okna przeglądarki). Umożliwiają tworzenie układów i typografii, które skalują się wraz z dostępną przestrzenią ekranu.

vw — szerokość widoku

1vw = 1% szerokości obszaru widoku. 100vw wypełnia całą szerokość obszaru widoku. Jest przydatne w przypadku elementów pełnej szerokości bez komplikacji związanych z wartościami procentowymi.

<div class="hero"></div>

vh — wysokość widoku

1vh = 1% wysokości obszaru widoku. 100vh wypełnia całą wysokość obszaru widoku. To klasyczne rozwiązanie w przypadku pełnoekranowych sekcji głównych i modali.

<div class="fullscreen">100vh fills the viewport height</div>

Problem mobilnego 100vh

W przeglądarkach mobilnych wysokość obszaru widoku zmienia się, gdy interfejs przeglądarki (pasek adresu) pojawia się lub znika podczas przewijania. 100vh może niespójnie uwzględniać interfejs przeglądarki albo go pomijać, przez co część treści może zostać ukryta.

dvh — dynamiczna wysokość widoku

dvh (dynamiczna wysokość widoku) dynamicznie aktualizuje się, aby odzwierciedlać rzeczywistą widoczną wysokość po dostosowaniu interfejsu przeglądarki. Rozwiązuje to problem mobilnego 100vh.

<div class="mobile-hero">Dynamic viewport height (100dvh)</div>

svh i lvh

CSS udostępnia również svh (mała wysokość widoku — zawsze pomija interfejs przeglądarki) oraz lvh (duża wysokość widoku — tak jakby interfejs był ukryty). Umożliwia to precyzyjne sterowanie zachowaniem obszaru widoku na urządzeniach mobilnych.

Płynna typografia z użyciem vw

Użycie vw do określania rozmiaru czcionki tworzy tekst, który skaluje się wraz z ekranem:

<h1>Fluid Heading</h1>

Ograniczenia szerokości widoku

100vw obejmuje szerokość paska przewijania na komputerach. Nieostrożne użycie tej wartości powoduje poziome przewijanie. W przypadku elementów blokowych preferuj width: 100%, pozostawiając vw do określonych zastosowań.

vmin i vmax

1vmin = 1% mniejszego wymiaru obszaru widoku (szerokości lub wysokości). 1vmax = 1% większego wymiaru. Jednostki te są przydatne w przypadku kwadratowych kontenerów, które dostosowują się do zmian orientacji.

<div class="square"></div>

svw, lvw, dvw — warianty szerokości

Podobnie jak w przypadku wariantów wysokości, CSS udostępnia svw, lvw i dvw dla szerokości. Warianty dynamiczne (dvw, dvh) są najbardziej przydatne na urządzeniach mobilnych.

Praktyczne wzorce

Typowe wzorce z użyciem jednostek widoku:

min-height: 100dvh — bezpieczne na urządzeniach mobilnych sekcje pełnoekranowe
height: 100svh — stałe panele interfejsu
font-size: clamp(1rem, 2.5vw, 2rem) — płynne nagłówki
width: min(800px, 90vw) — kontenery o bezpiecznej szerokości

Szybkie sprawdzenie

Dlaczego w pełnoekranowych sekcjach mobilnych preferuje się dvh zamiast vh?

Podsumowanie

vw i vh stanowią 1% szerokości lub wysokości obszaru widoku. Na urządzeniach mobilnych vh jest niewiarygodne z powodu interfejsu przeglądarki. Używaj dvh do dynamicznych, dokładnie dopasowanych do urządzeń mobilnych układów pełnoekranowych. vmin i vmax reagują odpowiednio na mniejszy i większy wymiar obszaru widoku.

Często zadawane pytania

Czy lekcja „Jednostki obszaru widoku: vw, vh i dvh” jest bezpłatna?

Tak — pełny tekst „Jednostki obszaru widoku: vw, vh i dvh” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu CSS Academy, przejdź na CoddyKit PRO. Kurs CSS Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „Jednostki obszaru widoku: vw, vh i dvh”?

Ustawią Państwo rozmiar elementów względem obszaru widoku przeglądarki, korzystając z jednostek vw, vh i nowoczesnej dvh. Ćwiczysz CSS Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć CSS Academy?

Nie wymagamy żadnego doświadczenia. CSS Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 3 z 4.

Ile czasu zajmuje lekcja „Jednostki obszaru widoku: vw, vh i dvh”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji CSS Academy?

Tak. Każda lekcja CSS Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

← Powrót do CSS Academy