Pixele na rem
Przelicz wartości pikseli na rem w nowoczesnym CSS. rem skaluje się z rozmiarem czcionki root użytkownika — lepsze dla dostępności niż sztywne px. Domyślny root w przeglądarce to często 16 px, więc 24 px = 1,5 rem, o ile projekt nie nadpisuje html { font-size }.
Pixele
Rozmiar fontu root (px)
Wynik
1rem
Jak przeliczyć px na rem
1. Wpisz wartość px z projektu (np. 32 px).
2. Ustaw rozmiar czcionki root (domyślnie 16 px, jeśli nie zmieniono).
3. Skopiuj wynik rem do arkusza stylów.
4. Używaj rem dla font-size, odstępów i skali komponentów; px zostaw dla cienkich obramowań, jeśli trzeba.
Przykłady px → rem
Tekst podstawowy i nagłówki
16 px = 1 rem (domyślnie). 24 px = 1,5 rem nagłówka. 14 px = 0,875 rem małego tekstu.
Root 10 px (design systemy)
Zespoły ustawiają html { font-size: 62,5% }, by 1 rem = 10 px. Wtedy token 32 px z projektu = 3,2 rem.
Skala odstępów
Siatka 8 px → 0,5 rem przy root 16 px. Padding 16 px = 1 rem — spójny rytm jak w Tailwind.
Kiedy przeliczać px na rem
• Gdy implementujesz specyfikacje Figma w responsywnym CSS z dostępnym zoomem.
• Gdy trzymasz się tokenów design systemu w rem.
• Gdy użytkownicy zmieniają domyślny rozmiar czcionki — layout w rem się dostosowuje.
Kiedy lepiej wybrać coś innego
• Gdy potrzebujesz em względem czcionki rodzica — użyj px→em.
• Gdy potrzebujesz jednostek viewport (vw/vh) na layout pełnoekranowy.
• Gdy dopasowujesz 1:1 piksele urządzenia na obramowaniach retina — 1 px border często zostaje w px.
rem vs em w CSS komponentów
em kumuluje się w zagnieżdżonych elementach z różnym font-size — padding w em rośnie z lokalnym tekstem. rem trzyma się root, dając przewidywalne odstępy w komponentach. Wiele zespołów używa rem do skali layoutu, em tylko do letter-spacing lub drobnych korekt przy lokalnej typografii.
Workflow design handoff
Projektanci eksportują px z Figma; deweloperzy dzielą przez uzgodniony root (udokumentuj w README). Przy triku 62,5% potwierdź założenia — mieszanie podwaja lub halbuje UI.
Najczęstsze pytania
Czym jest rem?
rem = „root em”. 1 rem równa się font-size elementu html, nie rodzica.
Dlaczego nie px wszędzie?
Sztywne px ignorują preferencje użytkownika. rem respektuje skalowanie root (WCAG).
Domyślny rozmiar root?
Większość przeglądarek domyślnie 16 px na html. Użytkownik może to zmienić w ustawieniach.
Wzór?
rem = px ÷ rootFontSizePx. Przykład: 20 px ÷ 16 = 1,25 rem.
Czy rem działa dla margin i padding?
Tak — rem dotyczy każdej właściwości CSS length, nie tylko font-size.
Czy dane trafiają na serwer?
Nie. Konwersja działa lokalnie.