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 najczęstszy kierunek w codziennej pracy. 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 dają wartości takie jak 0,875 czy 1,125.

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 często dają 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 i tak właśnie zapisuje je większość systemów projektowych, 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 konwerter pikseli na cale.

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 ostatnich 30 dniach rejestr npm odnotował ponad 870 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.