Jednostki CSS
Wpisz wartość i wybierz jednostkę, a zobaczysz ten sam rozmiar we wszystkich jednostkach CSS, gotowy do skopiowania.
Ten sam rozmiar w innych jednostkach
- 1.5remrozmiar czcionki głównej
- 1.5emrozmiar czcionki rodzica
- 150%procent rozmiaru czcionki rodzica
- 18ptpunkty
- 1.5pcpica
- 0.25incale
- 0.635cmcentymetry
- 6.35mmmilimetry
- 25.4Qćwierćmilimetry
- 1.6667vwprocent szerokości viewportu
- 2.6667vhprocent wysokości viewportu
- 2.6667vminprocent krótszego boku viewportu
- 1.6667vmaxprocent dłuższego boku viewportu
Kontekst
Px na rem przy 16 px
| px | rem | pt |
|---|---|---|
| 10px | 0.625rem | 7.5pt |
| 12px | 0.75rem | 9pt |
| 14px | 0.875rem | 10.5pt |
| 16px | 1rem | 12pt |
| 18px | 1.125rem | 13.5pt |
| 20px | 1.25rem | 15pt |
| 24px | 1.5rem | 18pt |
| 28px | 1.75rem | 21pt |
| 32px | 2rem | 24pt |
| 36px | 2.25rem | 27pt |
| 40px | 2.5rem | 30pt |
| 48px | 3rem | 36pt |
| 64px | 4rem | 48pt |
Jeden punkt to 1,333 px, bo cal ma 96 px i 72 pt. W drugą stronę jeden piksel to 0,75 pt.
Jak to działa
Rem zależy od rozmiaru czcionki elementu html, który we wszystkich przeglądarkach wynosi 16 px, jeśli nikt go nie zmieni. 24 px to więc 1,5 rem. Ustawienie html { font-size: 62.5% } daje 10 px na rem i łatwiejsze liczenie w pamięci, ale zmienia też wszystko, co opiera się na domyślnym rozmiarze.
Em zależy od rozmiaru czcionki rodzica, więc przy zagnieżdżonych elementach się kumuluje: 1,2 em wewnątrz 1,2 em daje rozmiar 1,44 raza większy. Procenty w font-size działają tak samo, a 100% odpowiada 1 em. Procenty w szerokościach czy marginesach zależą natomiast od bloku zawierającego i nie są tu przeliczane.
Rem to typowy wybór dla rozmiarów czcionek i odstępów, bo strona uwzględnia wtedy rozmiar wybrany przez odwiedzającego w przeglądarce. Px w rozmiarach czcionek nie blokuje powiększania, ale pomija to ustawienie, o czym mówią wytyczne WCAG dotyczące zmiany rozmiaru tekstu.
Vw i vh to jeden procent szerokości i wysokości viewportu, a vmin i vmax to jeden procent jego krótszego i dłuższego boku. Wartości zależą w całości od okna, więc przycisk pobiera rozmiar okna, którego teraz używasz. Na telefonach vh może się zmieniać, gdy pojawia się pasek adresu; rozwiązują to dvh, svh i lvh.
Pt, pc, in, cm, mm i Q to jednostki bezwzględne o stałych proporcjach w CSS: cal to 96 px, 72 pt i 2,54 cm. Na ekranie rzadko oznacza to prawdziwe centymetry, bo piksel CSS nie jest pikselem fizycznym. Najbardziej przydają się w arkuszach stylów do druku.
Wartości są zapisywane z kropką dziesiętną i najwyżej czterema cyframi po kropce, tak jak wymaga CSS.