Skip to main content

Konwerter jednostek CSS

Polski

Konwertuj między px, rem, em, vw, vh i pt.

1 rem
px
16
rem
1
em
1
vw
1.11
vh
1.78
pt
12
Wszystkie obliczenia wykonywane są lokalnie w przeglądarce. Dane nie są wysyłane na serwer.

Wyniki mają charakter informacyjny. Potwierdź je w innych źródłach.

Zagnieźdź 1,25em cztery poziomy w głąb, a wyjdzie 39px, a nie 20px

Jednostka em odnosi się do rodzica, więc zagnieżdżanie ją mnoży. Cztery elementy ustawione po 1,25em lądują na 2,441 wartości korzenia — 39,06px tam, gdzie autor niemal na pewno miał na myśli 20px. Jednostka rem odnosi się do korzenia i nigdy się nie kumuluje, i to jest cała praktyczna różnica między tymi dwiema jednostkami.

Jak to działa

  • Przelicza między px, rem, em, pt i procentami przy odniesieniu CSS równym 96 dpi.
  • Uwidacznia kumulowanie się jednostki em, bo to stamtąd biorą się niespodzianki.
  • Pokazuje, czym staje się wartość, gdy użytkownik zmieni rozmiar czcionki korzenia — a to właśnie robią ustawienia dostępności.
rem = px ÷ rozmiar czcionki korzenia        (domyślnie 16px)
em  = px ÷ rozmiar czcionki rodzica

1pt = 96 ÷ 72 = 1,3333px    więc 12pt = dokładnie 16px

zagnieżdżone em się mnoży: 1,25em wewnątrz 1,25em = 1,5625 × korzeń

Przykład z liczbami

Ten sam współczynnik 1,25 zastosowany jako em i jako rem, na czterech poziomach zagnieżdżenia.

  1. poziom 1 — em: 20,00px · rem: 20px
  2. poziom 2 — em: 25,00px · rem: 20px
  3. poziom 3 — em: 31,25px · rem: 20px
  4. poziom 4 — em: 39,06px · rem: 20px
  5. 1,25⁴ = 2,4414

Łańcuch em niemal podwaja zamierzony rozmiar do czwartego poziomu, podczas gdy każdy element w rem zostaje przy 20px. Żadna z jednostek nie jest zepsuta; odpowiadają na różne pytania, a sięgnięcie po em, gdy miało się na myśli rem, to jeden z najczęstszych błędów rozmiarowania w CSS.

Jak czytać wynik

  • Klasyczna awaria to zagnieżdżone listy. Ustaw ul { font-size: 0,875em }, a każdy poziom kurczy się ponownie: 14,00px, potem 12,25px, potem 10,72px. Na trzecim poziomie tekst jest o 33,0% mniejszy od korzenia, a nie o 12,5%, które reguła zdaje się zapowiadać.
  • 12pt równa się dokładnie 16px i jest to prawdziwy zbieg okoliczności wart zapamiętania. Domyślny rozmiar czcionki przeglądarki i standardowy rozmiar tekstu w druku wypadają na tej samej wartości przy odniesieniu CSS 96 dpi, więc pt i px zgadzają się w dokładnie jednym użytecznym punkcie i nigdzie indziej.
  • rem jest wyborem dostępnym dla typografii, bo podąża za ustawieniem korzenia u użytkownika. Ktoś, kto ustawił przeglądarkę na 24px, zobaczy 1,5rem wyrenderowane jako 36px, podczas gdy zapisane na sztywno 24px zostaje 24px i całkowicie go ignoruje.
  • em wciąż jest właściwą jednostką, gdy chcesz proporcji do lokalnego tekstu — na przykład dla wypełnienia wewnątrz przycisku, które ma skalować się z jego własną etykietą. Reguła kciuka brzmi: rem do rozmiarów czcionki, em do odstępów należących do elementu.

Częste pytania

Używać rem czy em?
rem do rozmiarów czcionki, em do odstępów, które mają skalować się z własnym tekstem elementu. rem nigdy się nie kumuluje, więc komponent wrzucony trzy poziomy głębiej renderuje się identycznie; em kumuluje się celowo, co jest przydatne przy wypełnieniu i szkodliwe przy typografii.
Dlaczego mój zagnieżdżony tekst się kurczy?
Bo em mnoży się na każdym poziomie. Reguła 0,875em zastosowana do trzech zagnieżdżonych list daje 14,00px, 12,25px, a potem 10,72px. Zamień font-size na rem, a każdy poziom wyrenderuje się w tym samym rozmiarze niezależnie od głębokości.

Źródła