Przeglądaj każdą jednostkę CSS — bezwzględne (px, cm, pt), względne czcionki (em, rem, ch), viewport (vw, dvh), zapytań kontenera, siatki (fr), kąta, czasu i rozdzielczości — w przeszukiwalnym, filtrowalnym według typu wykazie z opisem, notatką „kiedy używać” i gotowymi do skopiowania tokenami. W przeglądarce, bezpłatnie.

Każda jednostka CSS, objaśniona. Wszystko działa w Twojej przeglądarce na podstawie wbudowanego wykazu — nic nie jest wysyłane na serwer.

Żadna jednostka nie pasuje do wyszukiwania.
Spróbuj innej jednostki lub kategorii — na przykład rem, dvh, fr lub kąt.

O Wykaz jednostek CSS

Odnośnik jednostek CSS dokumentuje każdą jednostkę oferowaną przez ten język — w sumie 45 — uporządkowaną według typu: jednostki bezwzględne, takie jak px, cm i pt; jednostki względem czcionki, takie jak em, rem, ch i lh; jednostki widoku, od vw i vh po nowsze svh, lvh i dvh; jednostki zapytań kontenera, takie jak cqw i cqi; jednostkę siatki fr; a także kąt, czas, rozdzielczość i procenty.

Każda karta daje więcej niż definicję: token jednostki w kopiowalnym monospace, jej pełną nazwę, kategorię, proste wyjaśnienie sposobu jej obliczania oraz praktyczną notatkę „kiedy używać”, mówiącą, gdzie dana jednostka się sprawdza — a gdzie lepiej służy inna.

Wyszukiwanie dopasowuje tokeny, nazwy i znaczenia, więc rem, viewport width i root wszystkie znajdują swoje jednostki, a etykiety typu filtrują siatkę do jednej rodziny. Wszystko działa w Twojej przeglądarce na wbudowanym odnośniku, bez wysyłania czegokolwiek do serwera.

Jak korzystać z Wykaz jednostek CSS

  1. Wyszukaj jednostkę po tokenie, nazwie lub znaczeniu — na przykład rem, viewport width lub angle.
  2. Użyj etykiet typu, aby filtrować siatkę do jednostek bezwzględnych, względem czcionki, widoku, kontenera, siatki, kąta, czasu, rozdzielczości lub procentów.
  3. Przeczytaj opis każdej jednostki i notatkę „kiedy używać”, aby wybrać właściwą.
  4. Kliknij przycisk kopiowania, aby pobrać token jednostki do swojego arkusza stylów.

Najczęściej zadawane pytania

Użyj rem dla rozmiarów czcionki i wszystkiego, co powinno skalować się wraz z preferowanym rozmiarem tekstu użytkownika — rem śledzi rozmiar czcionki głównej, więc ustawienia dostępności przeglądarki działają. Użyj px dla rzeczy, które muszą pozostać optycznie stałe, jak cienkie obramowania.

em jest względne wobec rozmiaru czcionki bieżącego elementu, więc zagnieżdżone elementy kumulują wartość; rem jest zawsze względne wobec elementu głównego, dając przewidywalne rezultaty. Dlatego rem stało się domyślnym wyborem dla odstępów i skal typografii.

Przeglądarki mobilne pokazują i ukrywają swoje paski narzędzi, zmieniając widoczną wysokość, podczas gdy vh pozostaje przypięte do większego rozmiaru układu. Dynamiczna jednostka dvh śledzi rzeczywistą widoczną wysokość w miarę przesuwania się pasków narzędzi, a svh/lvh przypinają się do stanów najmniejszego i największego.

fr rozdziela wolną przestrzeń kontenera siatki proporcjonalnie: grid-template-columns: 2fr 1fr daje pierwszej kolumnie dwukrotnie więcej pozostałej szerokości niż drugiej, po odjęciu stałych ścieżek i odstępów. Istnieje wyłącznie wewnątrz definicji ścieżek siatki.

Skalują elementy względem najbliższego kontenera zapytania, a nie widoku: cqw to 1% szerokości kontenera, cqi to 1% jego rozmiaru w linii. Pozwalają komponentowi skalować się do pola, w którym się znajduje, niezależnie od rozmiaru ekranu.

Tak. Wszystkie 45 jednostek jest udokumentowanych za darmo na stronie, która działa całkowicie w Twojej przeglądarce — bez rejestracji, bez żądań do serwera.

Potrzebujesz pomocy?
Masz problem z tym narzędziem? Daj nam znać.
Zgłoś problem

Dodaj to darmowe narzędzie do swojej witryny — skopiuj i wklej poniższy kod.