Przelicz piksele na rem z dowolną bazą

Piksele zamieniasz na rem przez jedno dzielenie: liczba pikseli przez bazowy font-size. Przy domyślnym ustawieniu przeglądarki baza wynosi 16 px, więc 24 piksele dają 1,5 rem, a 14 pikseli – 0,875 rem. Jednostka rem odnosi się do rozmiaru tekstu elementu html, czyli korzenia dokumentu[1].

To kierunek z codziennej pracy nad interfejsem. Makieta przychodzi z wymiarami w pikselach, bo tak liczą programy graficzne, a arkusz stylów zapisuje się w rem, żeby układ reagował na ustawienia czytelnika.

Wynik podajemy z dokładnością do czterech miejsc, ponieważ pojedynczy piksel to przy bazie 16 px równe 0,0625 rem, a stopnie pisma 14 i 18 px to 0,875 i 1,125 rem.

Dalej znajdziesz tabelę 30 wartości przy trzech bazach, sposób automatycznego przeliczania w projekcie oraz zestawienie właściwości CSS z odpowiedzią, którą z nich przenosić na rem. Drogę w przeciwną stronę obsługuje konwerter rem na piksele.

Wzór ma jedno działanie: rem = piksele ÷ bazowy font-size. To działanie odwrotne do mnożenia, które zamienia rem na piksele.

Przykład dla odstępu 20 px: przy bazie 16 wychodzi 20 ÷ 16 = 1,25 rem. Ta sama wartość przy bazie 10 px z techniki 62,5% daje 2 rem, bo dzielenie przez dziesięć robi się w pamięci.

Wartości z makiety mogą też dawać ułamki: 18 pikseli to 1,125 rem, 30 pikseli to 1,875 rem, a 22 piksele – 1,375 rem. Wszystkie trzy są dokładne, więc wpisujesz je do arkusza wprost.

Jednostkę em liczy się tak samo, tylko dzieląc przez font-size rodzica zamiast korzenia dokumentu – ten rachunek wykonuje konwerter pikseli na em. Jeżeli wymiar ma trafić na papier, ten sam plik przelicza przelicznik pikseli i DPI.

Przy pojedynczej wartości wystarczy konwerter powyżej. Przy całym arkuszu stylów ten rachunek przenosi się do narzędzia, które wykonuje go przy każdym budowaniu projektu.

W preprocesorze zapisujesz funkcję, która dzieli podaną liczbę przez bazę. W Sassie wygląda to tak: @function rem($px) { @return math.div($px, 16) * 1rem; }, a potem w regule piszesz padding: rem(24) i dostajesz 1.5rem. Wartość bazy jest wtedy zapisana w jednym miejscu i zmienia się ją raz.

Drugi sposób działa na gotowym arkuszu i nie wymaga zmiany sposobu pisania. Wtyczka postcss-pxtorem, dołączana do kroku budowania, przechodzi przez wynikowy plik i zamienia piksele na rem według ustawionej bazy. W sierpniu 2026 roku rejestr npm odnotował ponad 880 tysięcy jego pobrań[2].

Trzecia droga to zmienne CSS. Zapisujesz --space-6: 1.5rem w jednym miejscu arkusza i odwołujesz się do nazwy zamiast do liczby. Wtedy przeliczenie wykonujesz raz, przy definiowaniu skali, a nie przy każdej regule.