Przepisanie makiety do kodu
Projekt podaje odstęp 24 px, arkusz stylów ma dostać 1,5 rem. To najczęstsza droga w codziennej pracy nad interfejsem.
Przelicz piksele na rem z dowolną bazą
Przy domyślnym ustawieniu przeglądarki 24 piksele to 1,5 rem, a 14 pikseli to 0,875 rem. Wpisz wartość z makiety, ustaw bazowy font-size i przepisz wynik prosto do arkusza stylów.
Loading tool editor...
REKLAMA
Po co przeliczać piksele na rem?
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.
Jak policzyć piksele na rem ręcznie? Wzór i przykład
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.
REKLAMA
Ile rem mają popularne wartości w pikselach?
| Wartość w pikselach | Baza 16 px (domyślna) | Baza 10 px (62,5%) | Baza 20 px (powiększony tekst) |
|---|---|---|---|
| 1 px | 0,0625 rem | 0,1 rem | 0,05 rem |
| 2 px | 0,125 rem | 0,2 rem | 0,1 rem |
| 4 px | 0,25 rem | 0,4 rem | 0,2 rem |
| 6 px | 0,375 rem | 0,6 rem | 0,3 rem |
| 8 px | 0,5 rem | 0,8 rem | 0,4 rem |
| 10 px | 0,625 rem | 1 rem | 0,5 rem |
| 12 px | 0,75 rem | 1,2 rem | 0,6 rem |
| 14 px | 0,875 rem | 1,4 rem | 0,7 rem |
| 16 px | 1 rem | 1,6 rem | 0,8 rem |
| 18 px | 1,125 rem | 1,8 rem | 0,9 rem |
| 20 px | 1,25 rem | 2 rem | 1 rem |
| 22 px | 1,375 rem | 2,2 rem | 1,1 rem |
| 24 px | 1,5 rem | 2,4 rem | 1,2 rem |
| 28 px | 1,75 rem | 2,8 rem | 1,4 rem |
| 30 px | 1,875 rem | 3 rem | 1,5 rem |
| 32 px | 2 rem | 3,2 rem | 1,6 rem |
| 36 px | 2,25 rem | 3,6 rem | 1,8 rem |
| 40 px | 2,5 rem | 4 rem | 2 rem |
| 44 px | 2,75 rem | 4,4 rem | 2,2 rem |
| 48 px | 3 rem | 4,8 rem | 2,4 rem |
| 56 px | 3,5 rem | 5,6 rem | 2,8 rem |
| 60 px | 3,75 rem | 6 rem | 3 rem |
| 64 px | 4 rem | 6,4 rem | 3,2 rem |
| 72 px | 4,5 rem | 7,2 rem | 3,6 rem |
| 80 px | 5 rem | 8 rem | 4 rem |
| 96 px | 6 rem | 9,6 rem | 4,8 rem |
| 128 px | 8 rem | 12,8 rem | 6,4 rem |
| 160 px | 10 rem | 16 rem | 8 rem |
| 192 px | 12 rem | 19,2 rem | 9,6 rem |
| 256 px | 16 rem | 25,6 rem | 12,8 rem |
Trzy bazy pokrywają trzy sytuacje: 16 px to ustawienie domyślne przeglądarki, 10 px wychodzi z techniki 62,5%, a 20 px to typowa wartość u osoby, która powiększyła tekst w ustawieniach.
Jak przeliczać piksele na rem automatycznie w projekcie?
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.
REKLAMA
Które właściwości przenosić na rem, a które zostawić w pikselach?
| Właściwość CSS | Przenosić na rem? | Dlaczego |
|---|---|---|
| font-size | Tak | To sedno całego zabiegu – stopień pisma ma reagować na ustawienie przeglądarki |
| padding i margin | Tak | Odstęp wokół tekstu powinien rosnąć razem z nim, inaczej przy większym stopniu robi się ciasno |
| width kolumny tekstu | Tak | Długość wiersza liczy się w znakach, więc szerokość ma iść za rozmiarem pisma |
| line-height | Nie, bez jednostki | Sam mnożnik, na przykład 1.5, dziedziczy się poprawnie w każdym zagnieżdżeniu |
| border-width | Nie | Włos obramowania ma zostać włosem, niezależnie od stopnia pisma |
| box-shadow | Nie | Cień jest efektem graficznym i nie ma związku z rozmiarem tekstu |
| border-radius | Zwykle nie | Promień zaokrąglenia opisuje kształt elementu, a nie jego treść |
| punkty odcięcia media queries | Tak, ale w em | W zapytaniu o media przeglądarka liczy od domyślnego rozmiaru tekstu, a nie od elementu html, więc em daje tam przewidywalny wynik <a class="source-ref" href="#zrodlo-3">[3]</a> |
Przy przepisywaniu istniejącego arkusza nie wszystko trzeba przeliczać. Zamiana pikseli na rem ma sens tam, gdzie wymiar ma rosnąć razem z tekstem czytelnika.
Piksel i rem – porównanie
| Cecha | px | rem |
|---|---|---|
| Punkt odniesienia | Brak, wartość bezwzględna | Font-size elementu html |
| Wartość domyślna | 1 px = 1/96 cala | 1 rem = 16 px |
| Reakcja na ustawienia czytelnika | Pozostaje bez zmian | Skaluje się razem z nimi |
| Gdzie się go podaje | Makiety, programy graficzne, pliki obrazów | Arkusze stylów, systemy projektowe |
| Typowe zastosowanie | Obramowania, cienie, grubości linii | Stopnie pisma, odstępy, szerokości |
| Automatyzacja | Wartość wpisana wprost | Funkcja w preprocesorze albo wtyczka w kroku budowania |
REKLAMA
Kiedy przyda Ci się to przeliczenie?
Ustawienie skali projektu
Zamiast przeliczać przy każdej regule, raz definiujesz zmienne CSS albo funkcję w preprocesorze i odwołujesz się do nazw.Przepisanie starego arkusza
Przy migracji z pikseli na rem przeliczasz stopnie pisma i odstępy, a obramowania oraz cienie zostawiasz bez zmian.Sprawdzenie dostępności
Wartości zapisane w rem rosną razem z ustawieniem czytelnika, czego wymaga wytyczna WCAG 1.4.4 o powiększeniu tekstu do 200% [4].
Konwertuj Piksele na inne jednostki
Sprawdź konwertery innych jednostek
pt na pxrem na pxem na pxcm na pxmm na pxcm na calecale na cmmm na calecale na mmmile na kilometrykilometry na milemetry na stopystopy na metrycale na stopystopy na calefunty na uncjeuncje na funtyml na uncjeuncje na mllitry na galonygalony na litrykg na funtyfunty na kgkg na gramygramy na kgkg na stonestone na kgcale na pxstopy na pxpica na pxmetry na pxHEX na RGBRGB na CMYKbajty na kilobajtykilobajty na bajtykilobajty na megabajtymegabajty na kilobajtymegabajty na gigabajtygigabajty na megabajtykilobajty na gigabajtygigabajty na kilobajtygigabajty na terabajtyterabajty na gigabajtykilobajty na terabajtyterabajty na kilobajtyUnix na datęDEC na BINDEC na HEXMbps na MB/s
Źródła
- CSS Values and Units Module Level 4 — W3C
- postcss-pxtorem — npm
- CSS values and units – length — MDN Web Docs
- Understanding SC 1.4.4: Resize Text (WCAG 2.2) — W3C
Wszystkie wartości w tabelach wyliczyliśmy z definicji jednostek i sprawdziliśmy rachunkowo przed publikacją. Dane historyczne i nazwy lokalnych jednostek opieramy na źródłach wymienionych wyżej.
Ostatnia aktualizacja treści: · przygotował i sprawdził zespół Arteon
Najczęściej zadawane pytania
Ile rem ma 1 piksel?
Przy domyślnej bazie 16 px jeden piksel to 0,0625 rem. Przy bazie 10 px z techniki 62,5% ten sam piksel daje 0,1 rem, a przy powiększonym tekście 20 px – 0,05 rem.
Jak przeliczyć piksele na rem?
Podziel liczbę pikseli przez bazowy font-size. Przy domyślnych 16 px wychodzi 24 ÷ 16 = 1,5 rem. Konwerter powyżej wykonuje to działanie dla dowolnej bazy od 1 do 100 px.
Ile rem ma 24 piksele?
1,5 rem przy bazie 16 px, 2,4 rem przy bazie 10 px i 1,2 rem przy bazie 20 px. Wartość 1,5 rem to typowy stopień pisma nagłówka sekcji.
Ile rem ma 14 pikseli?
0,875 rem przy domyślnej bazie 16 px. Taką wartość mają zwykle etykiety pól formularza i tekst pomocniczy pod polem.
Ile rem ma 20 pikseli?
1,25 rem przy bazie 16 px. Przy bazie 10 px to okrągłe 2 rem, co bywa argumentem za techniką 62,5% w projektach o rozbudowanej skali odstępów.
Ile rem ma 12 pikseli?
0,75 rem przy bazie 16 px. To najmniejszy stopień pisma używany zwykle w interfejsach – niżej tekst przestaje być wygodny do czytania.
Ile rem ma 40 pikseli?
2,5 rem przy bazie 16 px, 4 rem przy bazie 10 px i 2 rem przy bazie 20 px. Wartości tego rzędu opisują zwykle odstępy między sekcjami, a nie stopnie pisma.
Ile rem ma 80 pikseli?
5 rem przy domyślnej bazie 16 px. Przy bazie 10 px wychodzi 8 rem, a przy 20 px – 4 rem.
Czy trzeba zaokrąglać wynik w rem?
Wartości takie jak 0,875 czy 1,875 rem zapisuje się wprost i tak robi je większość systemów projektowych. Przeglądarka liczy je dokładnie, a zaokrąglenie do 0,88 rem przesunęłoby stopień pisma o ułamek piksela.
Jak przeliczać piksele na rem automatycznie?
W preprocesorze zapisujesz funkcję dzielącą przez bazę i piszesz rem(24) zamiast liczby. Na gotowym arkuszu działa wtyczka postcss-pxtorem dołączona do kroku budowania. Trzecia droga to zmienne CSS ze zdefiniowaną raz skalą odstępów.
Czy wszystko w arkuszu przeliczać na rem?
Stopnie pisma, odstępy i szerokości kolumn tekstu – tak, bo mają rosnąć razem z ustawieniem czytelnika. Obramowania, cienie i grubości linii zostają w pikselach, a wysokość wiersza zapisuje się bez jednostki, samym mnożnikiem.
Jakiej jednostki używać w media queries?
Em. W zapytaniu o media przeglądarka liczy jednostki względne od domyślnego rozmiaru tekstu, a nie od wartości ustawionej na elemencie html, więc punkt odcięcia zapisany w em zachowuje się przewidywalnie także wtedy, gdy projekt korzysta z techniki 62,5%.
Pomóż nam ulepszyć narzędzia
Masz pomysł na nową funkcję, znalazłeś błąd lub chcesz zaproponować inne narzędzie? Napisz do nas – odpowiadamy w ciągu 24 godzin.