Przewodnik po jednostkach CSS: px, rem, em, vw, vh szczegółowo

Wybór właściwych jednostek CSS jest jedną z najbardziej wpływowych decyzji podczas pisania arkuszy stylów. Wybrane jednostki określają, jak elementy skalują się na różnych rozmiarach ekranu, jak reagują na preferencje użytkownika (takie jak ustawienia rozmiaru czcionki przeglądarki) oraz przewidywalne zachowanie układu. Jednak wielu deweloperów domyślnie używa pikseli z przyzwyczajenia, tracąc elastyczność i korzyści dostępności oferowane przez jednostki względne. Ten przewodnik obejmuje wszystkie główne jednostki CSS, wyjaśnia kiedy używać każdej z nich, pokazuje jak konwertować między nimi i dostarcza praktycznych najlepszych praktyk dla nowoczesnego responsywnego projektowania.

Zrozumienie klasyfikacji jednostek CSS

Jednostki CSS dzielą się na dwie główne kategorie: jednostki bezwzględne i względne. Jednostki bezwzględne mają stały rozmiar fizyczny, podczas gdy jednostki względne wyprowadzają swoją obliczoną wartość z innego punktu odniesienia. Zrozumienie tego rozróżnienia jest podstawą do podejmowania świadomych wyborów jednostek.

Jednostki bezwzględne

Jednostki bezwzględne to miary o stałym rozmiarze. Najczęściej używaną jednostką bezwzględną w rozwoju webowym jest piksel (px). Inne jednostki bezwzględne to punkty (pt), centymetry (cm), milimetry (mm) i cale (in). Jednostki te są głównie używane w arkuszach stylów do druku lub gdy potrzebujesz miar, które nie zmieniają się z kontekstem. W CSS ekranowym px jest jedyną jednostką bezwzględną, której będziesz regularnie używać.

Jednostki względne

Jednostki względne obliczają swoją końcową wartość na podstawie wartości referencyjnej. em jest względne względem rozmiaru czcionki bieżącego elementu, rem względem rozmiaru czcionki elementu głównego, vw i vh względem wymiarów viewportu, a procenty względem elementu nadrzędnego. Jednostki względne są kamieniem węgielnym responsywnego i dostępnego projektowania, ponieważ pozwalają układowi automatycznie dostosowywać się do różnych kontekstów.

Piksel (px): jednostka bazowa

Piksel jest najbardziej intuicyjną jednostką CSS, ponieważ bezpośrednio mapuje się na piksele ekranu (z pewnymi zastrzeżeniami dotyczącymi współczynnika pikseli urządzenia). Wartości px są zawsze takie same niezależnie od kontekstu, co czyni je przewidywalnymi i łatwymi do zrozumienia. Jednak ta przewidywalność ma swoją cenę: wymiary oparte na pikselach nie skalują się, gdy użytkownik zmienia domyślny rozmiar czcionki przeglądarki, co stwarza problemy z dostępnością.

Kiedy używać px

• Szerokość ramek: ramka 1px powinna pozostać 1px niezależnie od ustawień rozmiaru czcionki.
• Box-shadow: przesunięcia cienia i promień rozmycia zazwyczaj najlepiej używać w pikselach dla spójnych efektów wizualnych.
• Drobne szczegóły: wszelkie wartości, których skalowanie zepsułoby projekt wizualny, takie jak cienkie linie podziału lub precyzyjne pozycjonowanie ikon.
• Rozmiar czcionki głównej: ustawienie html { font-size: 16px; } jako linii bazowej jest powszechnym wzorcem, chociaż powinieneś respektować domyślne wartości przeglądarki użytkownika.

Kiedy unikać px

Unikaj używania px dla rozmiarów czcionek, paddingów, marginesów i wymiarów układu, które powinny dostosowywać się do preferencji użytkownika. Użytkownicy, którzy zwiększają rozmiar czcionki przeglądarki do 20px, oczekują, że cały tekst odpowiednio się przeskaluje, ale rozmiary czcionek oparte na px nie reagują na tę zmianę.

rem: Rozmiar względny wobec głównego

). W większości przeglądarek domyślny rozmiar głównej czcionki to 16px, więc 1rem = 16px, 0,5rem = 8px, 2rem = 32px. Kluczową zaletą rem jest to, że skaluje się, gdy użytkownik zmienia domyślny rozmiar czcionki przeglądarki, co czyni go najlepszym wyborem dla dostępności.

Konwersja px na rem

Wzór konwersji jest prosty: podziel wartość w pikselach przez rozmiar czcionki głównej.

rem = px / root-font-size

// With default root font size of 16px:
12px = 12 / 16 = 0.75rem
16px = 16 / 16 = 1rem
24px = 24 / 16 = 1.5rem
32px = 32 / 16 = 2rem
48px = 48 / 16 = 3rem

Sztuczka 62,5%

Wielu deweloperów uważa dzielenie przez 16 za uciążliwe. Popularną sztuczką jest ustawienie rozmiaru czcionki głównej na 62,5%, co sprawia, że 1rem równa się 10px. Upraszcza to obliczenia w pamięci: 14px staje się 1,4rem, 24px staje się 2,4rem i tak dalej.

html {
    font-size: 62.5%; /* 1rem = 10px */
}

body {
    font-size: 1.6rem; /* 16px */
}

h1 {
    font-size: 3.2rem; /* 32px */
    margin-bottom: 1.6rem; /* 16px */
}

em: Rozmiar względny wobec kontekstu

Jednostka em jest względna wobec rozmiaru czcionki bieżącego elementu (lub wobec jego elementu nadrzędnego dla właściwości innych niż font-size). Oznacza to, że 1em równa się bieżącemu rozmiarowi czcionki, a wartości em kumulują się przy zagnieżdżaniu elementów. To zachowanie kumulacji może być zarówno potężne, jak i mylące.

Problem złożony

/* Parent: font-size 16px */
.parent {
    font-size: 1em; /* 16px */
}

/* Child: 1.2em of parent's 16px = 19.2px */
.child {
    font-size: 1.2em;
}

/* Grandchild: 1.2em of child's 19.2px = 23.04px */
.grandchild {
    font-size: 1.2em;
}

Każdy zagnieżdżony element mnoży rozmiar czcionki, powodując wzrost wykładniczy. Dlatego rem jest zazwyczaj lepszy dla rozmiarów czcionek. Jednak em sprawdza się w konkretnych przypadkach, gdy chcesz skalowania na poziomie komponentu.

Kiedy używać em

• Paddingi i marginesy wewnątrz komponentów: gdy chcesz, aby odstępy skalowały się z rozmiarem czcionki komponentu, em utrzymuje wszystko w proporcji. Jeśli zwiększysz rozmiar czcionki przycisku, jego padding automatycznie się przeskaluje.
• Punkty przerwania zapytań media: niektórzy deweloperzy preferują punkty przerwania oparte na em, ponieważ skalują się one z preferencjami rozmiaru czcionki użytkownika, zapewniając, że układ dopasowuje się przy odpowiednich szerokościach treści.
• Rozmiary ikon wewnątrz komponentów: ikony o rozmiarze w em skalują się proporcjonalnie z otaczającym tekstem.

Jednostki viewport: vw, vh, vmin, vmax

Jednostki viewport są względne względem wymiarów okna przeglądarki. 1vw równa się 1% szerokości viewportu, 1vh równa się 1% wysokości viewportu. vmin to mniejsza z vw i vh, vmax to większa. Jednostki te są niezbędne do tworzenia układów, które reagują na dostępną przestrzeń ekranu.

Typowe przypadki użycia jednostek viewport

Problem vh na urządzeniach mobilnych

W przeglądarkach mobilnych 100vh nie zawsze równa się widocznej wysokości viewportu. Pasek adresu przeglądarki i kontrolki nawigacyjne zajmują miejsce, ale 100vh obejmuje obszar za tymi kontrolkami. Powoduje to obcinanie treści na dole obszarów pełnej wysokości. Nowoczesny CSS zapewnia dvh (dynamiczną wysokość viewportu) jako rozwiązanie, które uwzględnia dynamiczne paski narzędzi. Alternatywnie użyj JavaScript, aby ustawić niestandardową właściwość CSS na podstawie window.innerHeight.

/* Modern approach */
.hero {
    height: 100dvh; /* Dynamic viewport height */
}

/* Fallback for older browsers */
.hero {
    height: 100vh;
    height: 100dvh;
}

Nowe jednostki viewport: svh, lvh, dvh

CSS wprowadza trzy nowe jednostki wysokości widoku, aby rozwiązać problemy z widokiem na urządzeniach mobilnych:

• svh (mała wysokość viewportu): Wysokość viewportu, gdy cały interfejs przeglądarki jest widoczny (pasek adresu rozwinięty).
• lvh (duża wysokość viewportu): Wysokość viewportu, gdy interfejs przeglądarki jest zminimalizowany (pasek adresu schowany).
• dvh (dynamiczna wysokość viewportu): Aktualna wysokość viewportu, zmienia się wraz z rozwijaniem lub zwijaniem interfejsu przeglądarki.

Te same warianty mały/duży/dynamiczny istnieją również dla szerokości (svw, lvw, dvw) i jednostek min/max (svmin, lvmin, dvmin itp.). Używaj dvh dla pełnoekranowych układów mobilnych, svh, gdy potrzebujesz zagwarantować, że treść jest widoczna bez przewijania, i lvh, gdy chcesz wypełnić maksymalną możliwą przestrzeń.

Płynna typografia z clamp()

Funkcja CSS clamp() zmienia zasady gry w typografii responsywnej. Przyjmuje trzy wartości: minimalną, preferowaną i maksymalną. Przeglądarka wybiera preferowaną wartość, ale ogranicza ją między minimum a maksimum.

/* Font size scales from 1rem to 2.5rem based on viewport */
h1 {
    font-size: clamp(1rem, 2.5vw + 0.5rem, 2.5rem);
}

/* Padding scales proportionally */
.container {
    padding: clamp(1rem, 3vw, 3rem);
}

To podejście daje korzyści skalowania opartego na viewport bez ryzyka, że tekst stanie się zbyt mały na urządzeniach mobilnych lub zbyt duży na desktopie. Eliminuje potrzebę punktów przerwania zapytań media dla rozmiarów czcionek, znacznie zmniejszając złożoność CSS.

Tabela referencyjna konwersji

Użyj tej tabeli jako szybkiego odniesienia dla typowych konwersji. Wszystkie wartości zakładają rozmiar czcionki głównej 16px i viewport 1920x1080.

Najlepsze praktyki jednostek CSS

• Używaj rem dla rozmiarów czcionek: to najważniejsza zasada. Rozmiary czcionek oparte na rem respektują preferencje użytkownika i skalują się konsekwentnie w całej aplikacji.
• Używaj em dla odstępów w komponentach: paddingi i marginesy wewnątrz komponentów korzystają z em, ponieważ skalują się proporcjonalnie, gdy zmienia się rozmiar czcionki komponentu.
• Używaj px dla ramek i drobnych szczegółów: wartości, które nie powinny skalować się z rozmiarem czcionki (takie jak ramki 1px i przesunięcia cieni), powinny używać pikseli.
• Używaj procentów dla szerokości układu: elastyczne układy używają kolumn i szerokości kontenerów opartych na procentach, pozwalając treści na przepływanie między różnymi rozmiarami ekranu.
• Używaj jednostek viewport dla elementów pełnoekranowych: sekcje hero, nakładki i wszelkie elementy, które powinny wypełniać viewport, korzystają z vh i vw.
• Używaj clamp() do płynnej typografii: zastąp punkty przerwania zapytań media dla rozmiarów czcionek przez clamp(), aby tworzyć płynne skalowanie między wartościami minimalnymi i maksymalnymi.
• Nigdy nie ustawiaj rozmiaru czcionki głównej w px: zawsze używaj procentów (takich jak 62,5%) lub zachowaj domyślne wartości przeglądarki. Ustawianie w pikselach nadpisuje preferencje dostępności użytkownika.
• Bądź konsekwentny: wybierz strategię jednostek dla projektu i trzymaj się jej. Losowe mieszanie jednostek utrudnia utrzymanie i debugowanie bazy kodu.