Każda jednostka CSS: bezwzględne, zależne od czcionki, zależne od viewportu, funkcje płynne oraz jednostki kąta, czasu i rozdzielczości — względem czego każda jest mierzona i kiedy po nią sięgnąć.
Jednostki bezwzględne (px, pt) zachowują stały rozmiar niezależnie od kontekstu; jednostki względne (rem, vw, %) skalują się względem wartości odniesienia. Dla rozmiarów czcionek wybieraj rem: respektuje ustawioną przez użytkownika wielkość czcionki głównej, więc twoja typografia uwzględnia jego preferencję dostępności. Użyj clamp(), aby uzyskać płynną typografię, która rośnie i maleje razem z viewportem, nigdy nie przekraczając dolnej ani górnej granicy.
Tabela referencyjna · 38 wpisy
Jednostki CSSExplained
38 of 38 rows
Bezwzględne
1/96 cala (piksel referencyjny CSS).
Stałe wymiary UI: obramowania, cienkie linie, wymiary ikon.
border: 1px solid #000;
1/72 cala (1pt = 1.333px).
Arkusze stylów do druku, gdzie rozmiary odwzorowują fizyczny papier.
font-size: 12pt;
1 centymetr (≈37.8px).
Układy do druku wymagające rzeczywistych wymiarów.
margin: 2cm;
1 milimetr (≈3.78px).
Dokładne pomiary w druku.
padding: 5mm;
1 cal (96px = 2.54cm).
Układy do druku podawane w calach.
margin: 1in;
Zależne od czcionki
Własny rozmiar czcionki elementu (odziedziczony po rodzicu).
Odstępy skalujące się razem z otaczającym tekstem.
padding: 1em;
Rozmiar czcionki elementu głównego (element html).
Rozmiary czcionek: respektuje ustawienie rozmiaru czcionki głównej przez użytkownika.
font-size: 1.25rem;
Szerokość zasięgowa glifu '0' w bieżącej czcionce.
Ustaw czytelną długość wiersza (znaków na wiersz).
max-width: 70ch;
Wysokość x bieżącej czcionki (wysokość małego 'x').
Pionowe metryki powiązane z krojem pisma.
line-height: 2ex;
Wysokość wersalików bieżącej czcionki (wysokość wielkiej litery).
Pionowe metryki dopasowane do wersalików, ciaśniejsze niż ex.
padding-top: 0.5cap;
Szerokość zasięgowa ideogramu '水' (woda) w bieżącej czcionce.
Wymiary podążające za jedną komórką znaku CJK.
width: 4ic;
Własna obliczona wysokość wiersza elementu.
Wymiarowanie elementów w pełnych wierszach tekstu.
height: 3lh;
Wysokość wiersza elementu głównego.
Odstępy w wielokrotnościach bazowej wysokości wiersza dokumentu.
margin-block: 2rlh;
Zależne od viewportu
Wartość tej samej właściwości w elemencie nadrzędnym.
Płynne układy skalowane do elementu zawierającego.
width: 50%;
1% szerokości viewportu.
Sekcje pełnej szerokości (full-bleed) dopasowane do szerokości ekranu.
width: 100vw;
1% wysokości viewportu.
Sekcje hero lub nakładki obejmujące wysokość ekranu.
height: 100vh;
1% mniejszego wymiaru viewportu.
Wymiarowanie elementów tak, aby mieściły się na ekranie w każdej orientacji.
font-size: 5vmin;
1% większego wymiaru viewportu.
Wypełnienie dominującej osi viewportu.
font-size: 5vmax;
1% małej wysokości viewportu (interfejs przeglądarki w pełni widoczny).
Mobilne sekcje na pełną wysokość, mieszczące się nad rozwiniętym interfejsem przeglądarki.
height: 100svh;
1% dużej wysokości viewportu (interfejs przeglądarki ukryty).
Tła, które muszą pokryć ekran nawet wtedy, gdy interfejs przeglądarki się chowa.
height: 100lvh;
1% dynamicznej wysokości viewportu, śledzącej interfejs przeglądarki przy jego pokazywaniu i ukrywaniu.
Mobilna poprawka dla 100vh: wysokość zmienia się, gdy pojawia się interfejs przeglądarki.
height: 100dvh;
1% małej szerokości viewportu.
Odpowiednik svh dla szerokości w najwęższym stanie viewportu.
width: 100svw;
1% dużej szerokości viewportu.
Odpowiednik lvh dla szerokości w najszerszym stanie viewportu.
width: 100lvw;
1% dynamicznej szerokości viewportu, śledzącej interfejs przeglądarki.
Odpowiednik dvh dla szerokości, gdy viewport zmienia rozmiar wraz z interfejsem.
width: 100dvw;
1% rozmiaru viewportu wzdłuż osi inline (szerokość w poziomych trybach pisania).
Wymiarowanie względem viewportu podążające za kierunkiem pisania.
width: 50vi;
1% rozmiaru viewportu wzdłuż osi bloku (wysokość w poziomych trybach pisania).
Wymiarowanie względem viewportu poprawne także w pionowych trybach pisania.
height: 50vb;
Płynne
Wartość preferowana ograniczona minimum i maksimum.
Płynna typografia, która nigdy nie przekracza dolnej ani górnej granicy.
width: clamp(320px, 80vw, 1100px);
Najmniejszy z argumentów rozdzielonych przecinkami.
Ograniczenie rozmiaru, aby nigdy nie przekroczył maksimum.
width: min(100%, 600px);
Największy z argumentów rozdzielonych przecinkami.
Wymuszenie minimalnego rozmiaru rosnącego wraz z viewportem.
width: max(50%, 300px);
Kąt
1/360 pełnego okręgu.
Transformacje obrotu i położenia kątów w gradientach.
transform: rotate(45deg);
Radiany; 1rad ≈ 57.2958deg.
Kąty wyliczone matematycznie, na przykład generowane transformacje.
transform: rotate(1.5708rad);
Gradiany; 400grad = pełny okrąg.
Starsze wartości kątowe lub wartości w stylu geodezyjnym.
transform: rotate(100grad);
1turn = jeden pełny okrąg 360°.
Pełne obroty i półobroty czytelne w jednym rzucie oka.
transform: rotate(0.5turn);
Czas
Jedna sekunda.
Czasy trwania animacji i przejść.
transition: opacity 0.3s;
Jedna milisekunda (1s = 1000ms).
Krótkie animacje i opóźnienia informacji zwrotnej interfejsu.
animation-duration: 150ms;
Rozdzielczość
Kropki na cal wyjścia.
Zapytania medialne o rozdzielczość skierowane na druk.
@media (min-resolution: 300dpi)
Kropki na jednostkę px; 1dppx odpowiada standardowemu ekranowi 96dpi.
Zapytania medialne Retina i wysokiego DPI.
@media (min-resolution: 2x)
Kropki na centymetr (1dppx ≈ 2.54dpcm).
Zapytania medialne o rozdzielczość w jednostkach metrycznych.