1. Wpisz wartość
Wpisz liczbę w polu wejściowym. Możesz użyć kropki lub przecinka jako separatora dziesiętnego.
Przelicz rem na px – konwerter CSS z ustawianym font-size
Ustaw bazowy font-size i natychmiast zobaczysz, ile pikseli ma 1,5 rem lub 0,875 rem. Koniec z ręcznym dzieleniem przez 16.
REKLAMA
REKLAMA
Loading tool editor...
Czym jest rem i kiedy warto przeliczać na piksele?
Jednostka rem (root em) w CSS odnosi się do wielkości czcionki elementu głównego (<html>). Domyślnie przeglądarki ustawiają bazowy font-size na 16 px, więc 1 rem = 16 px.
Rem jest preferowanym sposobem definiowania wymiarów w responsywnym CSS. Dzięki temu cały układ strony skaluje się proporcjonalnie, gdy użytkownik zmieni rozmiar czcionki w ustawieniach przeglądarki (dostępność WCAG).
W praktyce projektanci dostarczają makiety z wymiarami w pikselach, a programiści muszą przeliczyć je na rem. Na przykład: padding 24 px = 1,5 rem, margin 32 px = 2 rem.
Jeśli projekt używa bazowego font-size innego niż 16 px (np. 10 px przy technice “62,5%”), konwerter pozwala ustawić dowolną wartość bazową.
Jak korzystać z konwertera?
2. Odczytaj wynik
Wynik konwersji pojawi się natychmiast w polu obok – bez klikania żadnego przycisku.3. Skopiuj lub zmień kierunek
Kliknij Kopiuj wynik lub użyj przycisku Zmień kolejność, aby przeliczać w drugą stronę.
Kiedy przydaje się ten konwerter?
Kodowanie CSS
Przeliczanie makiet (px) na rem: padding 24 px = 1,5 rem.Responsywność
Rem skaluje się z preferencjami użytkownika – lepsze od stałych pikseli.Dostępność (WCAG)
Rem respektuje ustawienia rozmiaru tekstu użytkownika.Systemy projektowe
Skale spacing w rem: 0,25 / 0,5 / 1 / 1,5 / 2 / 3 rem.
Co wyróżnia nasz konwerter?
Pełna prywatność
Wszystkie obliczenia odbywają się lokalnie w przeglądarce. Żadne dane nie są wysyłane na serwer.Wynik w czasie rzeczywistym
Wynik aktualizuje się natychmiast podczas wpisywania – bez konieczności klikania.Obustronna konwersja
Przycisk Zmień kolejność pozwala przeliczać w obu kierunkach jednym kliknięciem.Tabela popularnych wartości
Gotowa tabela z najczęściej przeliczanymi wartościami i opisami kontekstowymi.
Jak działa konwersja rem na px?
Jednostka rem (root em) w CSS odnosi się do rozmiaru czcionki elementu głównego dokumentu (html). Domyślnie przeglądarki ustawiają bazowy rozmiar czcionki na 16 pikseli, co oznacza, że 1 rem = 16 px. Aby przeliczyć rem na piksele, wystarczy pomnożyć wartość rem przez bazowy rozmiar czcionki.
Na przykład przy domyślnym ustawieniu 2 rem to 32 px, a 0,875 rem to 14 px. Popularna technika CSS polega na ustawieniu font-size: 62.5% na elemencie html, co zmienia bazę na 10 px — wówczas 1 rem = 10 px i przeliczanie staje się znacznie prostsze.
Jednostka rem jest preferowana w nowoczesnym CSS, ponieważ zapewnia spójne skalowanie całego interfejsu — zmiana bazowego rozmiaru czcionki automatycznie dostosowuje wszystkie elementy korzystające z rem.
Praktyczne wskazówki
- Szybki przelicznik: px ÷ 16 = rem. Na przykład: 24 px ÷ 16 = 1,5 rem.
- Tailwind CSS używa rem:
p-4= 1 rem = 16 px. - Technika 62,5%:
html { font-size: 62.5% }→ 1 rem = 10 px (prostsze przeliczanie). - Nie myl rem z em – rem odnosi się do
<html>, em do rodzica.
REKLAMA
rem vs px – porównanie
| Cecha | rem | px |
|---|---|---|
| Typ | Relatywna (root) | Absolutna |
| Odniesienie | font-size <html> | Stała wartość |
| Dostępność | Skaluje się z preferencjami | Stała niezależnie od ustawień |
| Responsywność | Automatyczna | Wymaga media queries |
| Tailwind | Domyślna jednostka | Używana w konfiguracji |
rem
- Typ
Relatywna (root) - Odniesienie
font-size <html> - Dostępność
Skaluje się z preferencjami - Responsywność
Automatyczna - Tailwind
Domyślna jednostka
px
- Typ
Absolutna - Odniesienie
Stała wartość - Dostępność
Stała niezależnie od ustawień - Responsywność
Wymaga media queries - Tailwind
Używana w konfiguracji
Konwertuj inne jednostki do Piksele
Sprawdź konwertery innych jednostek
Najczęściej zadawane pytania
Ile pikseli ma 1 rem?
Domyslnie 1 rem = 16 px, bo przegladarki ustawiaja bazowy font-size na 16 px. Jesli ustawisz html { font-size: 62.5% }, podstawa wynosi 10 px i wtedy 1 rem = 10 px – przeliczanie staje sie prostsze.
Jak przeliczyc piksele na rem?
Podziel piksele przez bazowy font-size. Przy domyslnym 16 px: 24 px / 16 = 1,5 rem. Przy technice 62,5% (baza 10 px): 24 px / 10 = 2,4 rem. Konwerter wykonuje to obliczenie automatycznie dla dowolnej bazy.
Jaka jest roznica miedzy rem a em?
Rem odnosi sie do font-size elementu html i jest stale na calej stronie – niezaleznie od zagniezdzenia. Em odnosi sie do font-size bezposredniego rodzica i moze kumulowac sie przy zagniezdzoniu. Do font-size zawsze uzywaj rem – unikniesz nieprzewidywalnych rozmiarow.
Co to jest technika 62,5%?
Ustawienie html { font-size: 62.5% } zmienia bazowy font-size na 10 px (62,5% z 16 px). Dzieki temu 1 rem = 10 px i przeliczanie jest prostsze – np. 2,4 rem = 24 px. Technika popularna wsrod programistow, ale wymaga ustawienia body na 1,6 rem dla czytelnosci tekstu.
Czy Tailwind CSS uzywa rem?
Tak. Tailwind generuje wszystkie wartosci spacing w rem: p-4 = 1 rem = 16 px, p-8 = 2 rem = 32 px. Zmiana bazowego font-size projektu automatycznie zmienia wszystkie wartosci pikseli w calym projekcie.
Czy powinienem uzywac rem zamiast px?
Rem jest zalecany dla font-size i spacingow – skaluje sie z preferencjami uzytkownika i poprawia dostepnosc (WCAG 1.4.4). Piksele sa odpowiednie dla borderow, cieni i stalych wymiarow niezaleznych od tekstu. Nowoczesne projekty CSS uzywaja mieszanki obu jednostek.
Jak rem poprawia dostepnosc strony?
Gdy uzytkownik ustawia wiekszy rozmiar czcionki w przegladarce (np. 20 px zamiast 16 px), caly interfejs oparty na rem automatycznie sie powieksza. Piksele te zmiane ignoruja. WCAG 1.4.4 wymaga, by tekst dal sie powiekszyc do 200% bez utraty tresci – rem to umozliwia.
Ile rem to 1 px?
Przy domyslnym font-size 16 px: 1 px = 0,0625 rem. W praktyce zapamietaj klucz: 12 px = 0,75 rem, 14 px = 0,875 rem, 16 px = 1 rem, 20 px = 1,25 rem, 24 px = 1,5 rem, 32 px = 2 rem.
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.