Jednostki CSS: px, %, em, rem, vw, vh, svh, ch

Cele lekcji

Po ukończeniu tej lekcji będziesz umieć:

• odróżnić jednostki absolutne od względnych,
• wybrać px, %, em albo rem do konkretnego zadania,
• bezpiecznie używać jednostek viewportu vw, vh i svh,
• użyć ch do kontroli długości tekstu,
• zbudować skalę odstępów i rozmiarów, która lepiej reaguje na różne ekrany.

Kontekst praktyczny

Jednostki pojawiają się w każdym fragmencie UI: szerokości kontenerów, fontach, paddingach, gapach, wysokościach hero, siatkach kart i ograniczeniach długości tekstu.

Po co są jednostki CSS

CSS musi wiedzieć, jak duży ma być element. Sama liczba nie wystarczy: 16 nic nie znaczy, ale 16px, 1rem albo 50% mówią przeglądarce, względem czego obliczyć rozmiar.

Najważniejszy podział dla początkującego to jednostki stałe i względne. Stałe są przewidywalne, ale mniej elastyczne. Względne lepiej reagują na kontekst, ale wymagają zrozumienia punktu odniesienia.

px

px to najprostsza jednostka do zrozumienia. Daje konkretną wartość i dobrze sprawdza się przy cienkich borderach, ikonach, małych przesunięciach albo precyzyjnych detalach.

.card {
  border: 1px solid #dbe2f1;
  border-radius: 12px;
}

Nie używaj jednak px do wszystkiego. Sztywne szerokości i wysokości szybko powodują problemy w responsywnym układzie.

%

Procent odnosi się do kontekstu, najczęściej do rozmiaru rodzica. Jest przydatny, gdy element ma zajmować część dostępnej przestrzeni.

.container {
  width: min(1120px, 92%);
  margin-inline: auto;
}

W tym projekcie 92% oznacza, że kontener ma zostawić margines po bokach małego ekranu, ale nie przekroczyć limitu ustawionego przez min().

em

em zależy od rozmiaru fontu danego elementu. Jeśli element ma font-size: 20px, to 1em w tym elemencie oznacza 20px.

.button {
  font-size: 1rem;
  padding: .7em 1.1em;
}

To dobry wybór dla paddingu przycisków i badge’y, które mają rosnąć razem z tekstem. Uważaj jednak na zagnieżdżenia, bo em może dziedziczyć zmieniony rozmiar fontu z rodzica.

rem

rem odnosi się do rozmiaru fontu elementu głównego, czyli zwykle html. Dzięki temu jest stabilniejszy niż em i świetnie nadaje się do spacingu oraz typografii.

Kopiuj:root {
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
}

.card {
  padding: var(--space-3);
  gap: var(--space-2);
}

W projektach produkcyjnych rem dobrze współpracuje z design tokenami, bo zmiany skali są przewidywalne w całym interfejsie.

vw, vh, svh

Jednostki viewportu zależą od widocznego obszaru przeglądarki. 1vw to 1% szerokości viewportu, a 1vh to 1% jego wysokości.

svh oznacza small viewport height. Jest przydatne na mobile, bo lepiej uwzględnia dynamiczne paski przeglądarki niż klasyczne vh.

.hero {
  min-height: 70svh;
  padding-block: 4rem;
}

ch

ch odnosi się w uproszczeniu do szerokości znaku „0” w aktualnym foncie. Najczęściej używa się go do ograniczania długości tekstu.

.article-lead {
  max-width: 62ch;
}

To praktyczne przy akapitach i leadach. Zamiast rozciągać tekst na całą szerokość desktopu, ograniczasz linię do długości, którą łatwiej czytać.

Jak dobierać jednostki

Nie ma jednej najlepszej jednostki. Jest jednostka najlepiej dopasowana do konkretnej decyzji projektowej.

• px — border, ikona, cienki detal, mała stała wartość.
• % — szerokość zależna od rodzica albo elastyczny kontener.
• em — padding zależny od rozmiaru tekstu w tym samym elemencie.
• rem — typografia, odstępy, promienie i skala komponentów.
• vw, vh, svh — sekcje zależne od viewportu.
• ch — szerokość bloków tekstu.

Demo jednostek

Poniższe demo pokazuje, jak różne jednostki opisują różne zależności: tekst, kontener, viewport i długość czytania.

Kopiuj.unit-card {
  width: min(100%, 34rem);
  padding: 1.25rem;
  border: 1px solid #dbe2f1;
}

.unit-card__title {
  font-size: 1.25rem;
}

.unit-card__badge {
  padding: .35em .7em;
}

.unit-card__text {
  max-width: 56ch;
}

Interpretacja: karta używa rem dla odstępów, % dla szerokości, em dla badge’a, ch dla tekstu i svh jako przykład zależności od wysokości viewportu.

Najczęstsze błędy początkujących

• Używanie px do każdej szerokości i każdego odstępu.
• Ustawianie height: 100vh na mobile bez sprawdzenia pasków przeglądarki.
• Mylenie em i rem w zagnieżdżonych komponentach.
• Rozciąganie akapitów na całą szerokość desktopu bez max-width w ch.
• Używanie procentów bez zrozumienia, względem którego rodzica są liczone.
• Mieszanie jednostek bez konsekwencji i bez jasnego powodu.

Mini zadanie

Zbuduj kartę artykułu, która używa przynajmniej czterech różnych jednostek.

• Ustaw szerokość karty przez width: min(100%, 36rem).
• Dodaj padding w rem.
• Badge albo przycisk ustaw z paddingiem w em.
• Ogranicz tekst przez max-width: 60ch.
• Dodaj mały element zależny od viewportu, np. min-height: 30svh dla sekcji hero.

Checklista

• Wiem, kiedy px jest praktyczny, a kiedy zbyt sztywny.
• Rozumiem, że % zależy od kontekstu rodzica.
• Potrafię wyjaśnić różnicę między em i rem.
• Umiem użyć svh jako bezpieczniejszej jednostki wysokości viewportu na mobile.
• Wiem, że ch pomaga kontrolować długość linii tekstu.
• Dobieram jednostki do celu, a nie używam jednej wartości wszędzie.

Podsumowanie lekcji

Jednostki CSS są częścią projektowania responsywnego. px daje precyzję, % relację do kontenera, em zależność od lokalnego tekstu, rem stabilną skalę, jednostki viewportu relację do ekranu, a ch kontrolę czytelności tekstu.

Kolejny krok roadmapy to obrazy i media responsywne: max-width, object-fit, proporcje oraz bezpieczne kadrowanie.