Jednostki CSSFunkcje i jednostki

Jednostki

Przegląd jednostek długości w CSS: od stałych pikseli, przez em i rem zależne od czcionki, po jednostki okna, kontenera i siatki.

Na tej stronie

Przykład
Definicja i zastosowanie
Składnia
Jednostki
Jednostki w praktyce
Więcej przykładów
Obsługa przeglądarek
Dobre praktyki
Powiązane hasła

Przykład

CSS

.lesson {
  max-width: 45ch;
  padding: 1rem 1.25rem;
  border: 1px solid #3f3f46;
  border-radius: 0.75rem;
}

.lesson h3 {
  margin: 0 0 0.5rem;
  font-size: 1.25rem;
}

.lesson .tag {
  display: inline-block;
  margin-bottom: 0.5rem;
  padding: 0.25em 0.75em;
  border-radius: 1em;
  background: #3b0764;
  font-size: 0.75rem;
}

HTML przykładu

<article class="lesson">
  <span class="tag">Moduł 2</span>
  <h3>Jednostki względne</h3>
  <p style="margin: 0; color: #a1a1aa;">Szerokość w ch, odstępy w rem, etykieta w em, a cienka ramka w pikselach.</p>
</article>

Podgląd

Każda jednostka ma tu swoje zadanie: ch ogranicza szerokość tekstu, rem trzyma spójne odstępy i rozmiary, em skaluje etykietę razem z jej czcionką, a px rysuje ramkę, która ma być zawsze cienka.

Definicja i zastosowanie

Każda długość w CSS to liczba z jednostką, np. 16px, 1.5rem czy 50%. Wyjątkiem jest zero, przy którym jednostkę można pominąć. Jednostki dzielą się na bezwzględne, które zawsze znaczą to samo (w praktyce tylko px), i względne, liczone od czegoś innego: rozmiaru czcionki, rodzica, okna przeglądarki albo kontenera.

em i rem zależą od czcionki. 1rem to rozmiar czcionki elementu głównego <html> (domyślnie 16px), taki sam w całym dokumencie. 1em to rozmiar czcionki bieżącego elementu, więc zmienia się razem z nim, a w samej właściwości font-size liczy się od czcionki rodzica. Dlatego em kumuluje się w zagnieżdżonych elementach, a rem nie.

Jednostki okna liczą się od obszaru widoku: 1vw to 1% jego szerokości, 1vh 1% wysokości. Na telefonach wysokość okna zmienia się, gdy chowa się pasek adresu, dlatego powstały warianty: svh (mały widok, pasek widoczny), lvh (duży widok, pasek schowany) i dvh (dynamiczny, zmienia się na bieżąco). Do sekcji na cały ekran lepsze niż 100vh są 100svh albo 100dvh.

Są też jednostki do zadań specjalnych. ch to szerokość znaku „0” w bieżącej czcionce, więc dobrze ogranicza długość wiersza. fr działa tylko w CSS Grid i oznacza część wolnego miejsca. cqi to 1% szerokości kontenera z container-type. Procenty liczą się zwykle od rodzica, ale od jego szerokości czy wysokości, zależy od właściwości: width od szerokości, height od wysokości, a padding i margin zawsze od szerokości.

Składnia

<liczba><jednostka>

bezwzględne: px
zależne od czcionki: em, rem, ch
zależne od rodzica, okna lub kontenera: %, vw, vh, svh, lvh, dvh, cqi
siatka: fr

Jednostki

px
stała wartość
Piksel CSS to jednostka bezwzględna. Kafelek ma zawsze 160 px, niezależnie od rodzica i okna. Na ekranach o dużej gęstości jeden piksel CSS to kilka pikseli fizycznych, dzięki czemu rozmiary wyglądają podobnie na każdym urządzeniu.
em
czcionka elementu
Odstępy i zaokrąglenie w em rosną razem z czcionką przycisku. Wystarczy zmienić font-size, a proporcje zostają zachowane.
rem
czcionka elementu html
Oba napisy mają 20 px (1,25 × 16 px), choć ich rodzice mają różne czcionki. rem zawsze liczy się od elementu <html>, więc się nie kumuluje.
%
rozmiar rodzica
Procenty liczą się od rodzica. Paski mają ćwierć, połowę i całą szerokość ramki z przerywaną linią.
vw / vh
szerokość i wysokość okna
50vw to połowa szerokości okna, tutaj ramki podglądu, a nie pola z przerywaną linią, dlatego pierwszy kafelek jest szerszy niż połowa pola. 50vh to połowa wysokości okna.
dvh / svh / lvh
wysokość okna na telefonie
Na telefonie pasek adresu chowa się i pokazuje. svh liczy wysokość przy widocznym pasku (najmniejszą), lvh przy schowanym (największą), a dvh zmienia się na bieżąco. W ramce podglądu paska nie ma, więc wszystkie trzy kafelki są równe.
ch
szerokość znaku 0
Szerokość znaku „0” w bieżącej czcionce. Akapit jest nie szerszy niż 24 takie znaki, a pole na kod pocztowy mieści dokładnie tyle, ile trzeba.
fr
wolne miejsce w siatce
fr działa tylko w siatce i oznacza część wolnego miejsca. Środkowa kolumna dostaje dwie części, a boczne po jednej.
cqi
szerokość kontenera
Przeciągnij prawy dolny róg ramki. Tekst ma 9% szerokości kontenera, więc rośnie i maleje razem z nim, a nie z oknem.

Jednostka	Liczona od	Opis
px	stała wartość	Piksel CSS to jednostka bezwzględna. Kafelek ma zawsze 160 px, niezależnie od rodzica i okna. Na ekranach o dużej gęstości jeden piksel CSS to kilka pikseli fizycznych, dzięki czemu rozmiary wyglądają podobnie na każdym urządzeniu.
em	czcionka elementu	Odstępy i zaokrąglenie w `em` rosną razem z czcionką przycisku. Wystarczy zmienić `font-size`, a proporcje zostają zachowane.
rem	czcionka elementu html	Oba napisy mają 20 px (1,25 × 16 px), choć ich rodzice mają różne czcionki. `rem` zawsze liczy się od elementu `<html>`, więc się nie kumuluje.
%	rozmiar rodzica	Procenty liczą się od rodzica. Paski mają ćwierć, połowę i całą szerokość ramki z przerywaną linią.
vw / vh	szerokość i wysokość okna	`50vw` to połowa szerokości okna, tutaj ramki podglądu, a nie pola z przerywaną linią, dlatego pierwszy kafelek jest szerszy niż połowa pola. `50vh` to połowa wysokości okna.
dvh / svh / lvh	wysokość okna na telefonie	Na telefonie pasek adresu chowa się i pokazuje. `svh` liczy wysokość przy widocznym pasku (najmniejszą), `lvh` przy schowanym (największą), a `dvh` zmienia się na bieżąco. W ramce podglądu paska nie ma, więc wszystkie trzy kafelki są równe.
ch	szerokość znaku 0	Szerokość znaku „0” w bieżącej czcionce. Akapit jest nie szerszy niż 24 takie znaki, a pole na kod pocztowy mieści dokładnie tyle, ile trzeba.
fr	wolne miejsce w siatce	`fr` działa tylko w siatce i oznacza część wolnego miejsca. Środkowa kolumna dostaje dwie części, a boczne po jednej.
cqi	szerokość kontenera	Przeciągnij prawy dolny róg ramki. Tekst ma 9% szerokości kontenera, więc rośnie i maleje razem z nim, a nie z oknem.

Jednostki w praktyce

Piksel CSS to jednostka bezwzględna. Kafelek ma zawsze 160 px, niezależnie od rodzica i okna. Na ekranach o dużej gęstości jeden piksel CSS to kilka pikseli fizycznych, dzięki czemu rozmiary wyglądają podobnie na każdym urządzeniu.

.demo { width: 160px; }

Odstępy i zaokrąglenie w em rosną razem z czcionką przycisku. Wystarczy zmienić font-size, a proporcje zostają zachowane.

.demo {
  padding: 0.5em 1em;
  border: 0;
  border-radius: 0.5em;
  background: #7c3aed;
  color: #fff;
}

rem

Oba napisy mają 20 px (1,25 × 16 px), choć ich rodzice mają różne czcionki. rem zawsze liczy się od elementu <html>, więc się nie kumuluje.

.demo {
  font-size: 1.25rem;
  font-weight: 700;
  color: #a78bfa;
}

Procenty liczą się od rodzica. Paski mają ćwierć, połowę i całą szerokość ramki z przerywaną linią.

.a { width: 25%; }
.b { width: 50%; }
.c { width: 100%; }

vw / vh

50vw to połowa szerokości okna, tutaj ramki podglądu, a nie pola z przerywaną linią, dlatego pierwszy kafelek jest szerszy niż połowa pola. 50vh to połowa wysokości okna.

.vw { width: 50vw; }
.vh { height: 50vh; }

dvh / svh / lvh

Na telefonie pasek adresu chowa się i pokazuje. svh liczy wysokość przy widocznym pasku (najmniejszą), lvh przy schowanym (największą), a dvh zmienia się na bieżąco. W ramce podglądu paska nie ma, więc wszystkie trzy kafelki są równe.

.s { height: 50svh; }
.d { height: 50dvh; }
.l { height: 50lvh; }

Szerokość znaku „0” w bieżącej czcionce. Akapit jest nie szerszy niż 24 takie znaki, a pole na kod pocztowy mieści dokładnie tyle, ile trzeba.

.demo { max-width: 24ch; margin: 0 0 10px; }
.zip { width: 8ch; font-family: monospace; }

fr działa tylko w siatce i oznacza część wolnego miejsca. Środkowa kolumna dostaje dwie części, a boczne po jednej.

.demo {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  gap: 8px;
}

cqi

Przeciągnij prawy dolny róg ramki. Tekst ma 9% szerokości kontenera, więc rośnie i maleje razem z nim, a nie z oknem.

.cq { container-type: inline-size; }
.cq p { font-size: 9cqi; }

Więcej przykładów

Sekcja na całą wysokość ekranu telefonu

CSS

.hero {
  min-height: 100vh;
  min-height: 100svh;
}

Pierwsza deklaracja to zapas dla starszych przeglądarek, druga nadpisuje ją tam, gdzie svh działa. Sekcja wypełnia ekran telefonu, a jej dół nie chowa się pod paskiem adresu. Przykład nie ma podglądu, bo ramka dopasowuje wysokość do treści.

Obsługa przeglądarek

Szeroko dostępne

Działa we wszystkich nowoczesnych przeglądarkach, także na telefonach. Możesz używać bez obaw.

Chrome
Edge
Firefox
Safari

Dobre praktyki

Rozmiary czcionek podawaj w rem, nie w px. Tekst zareaguje wtedy na ustawienie wielkości czcionki w przeglądarce, z którego korzystają osoby słabiej widzące.
Uważaj na 100vw: obejmuje też pionowy pasek przewijania, więc element może wyjść poza stronę i wywołać poziome przewijanie. Na pełną szerokość zwykle wystarczy 100%.
Długość wiersza ogranicz, np. max-width: 65ch. Wiersze mieszczące kilkadziesiąt znaków czyta się najwygodniej.

Powiązane hasła

Widzisz błąd albo brakuje przykładu? Napisz do nas.

Darmowy kursPrzećwicz CSS w kursie HTML i CSSZadania z podpowiedziami, edytor kodu i postępy zapisywane na bieżąco.Zobacz kurs