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.
Loading tool editor...
REKLAMA
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ę.
REKLAMA
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.
REKLAMA
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 |
Konwertuj inne jednostki do Piksele
Sprawdź konwertery innych jednostek
px na cmpx na mmcm 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 mlkg na funtyfunty na kgHEX 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
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.
Sprawdź inne narzędzia
Edytor zdjęć
Zmień rozmiar, wykadruj i przekonwertuj zdjęcie. Gotowe formaty, okrągłe avatary, eksport JPG/PNG/WebP.
Licznik meta title i description
Sprawdź długość tytułu i opisu strony w pikselach. Podgląd wyniku w Google na żywo.
PNG na JPG
Zamień pliki PNG na JPG. Konwersja w przeglądarce, bez limitu plików i rejestracji.
Generator favicon
Stwórz favicon.ico dla swojej strony z jednego obrazu. Bez logowania i rejestracji.
Generator palet kolorów
Wygeneruj 9 palet z jednego koloru: monochromatyczną, komplementarną, triadyczną i inne. Kody HEX.
Tester kontrastu kolorów
Sprawdź kontrast tekstu i tła według WCAG 2.1 AA i AAA. Automatyczna korekta kolorów.
Generator kodów QR
Stwórz kod QR do strony, wizytówki vCard lub druku. Eksport PNG i SVG, bez rejestracji.
Licznik słów i znaków
Policz słowa, znaki, zdania i czas czytania. Sprawdź czytelność tekstu wskaźnikiem Flesch-Kincaid.