Pixel ↔ REM
Konwertuj między pikselami a REM
Jak używać Pixel ↔ REM
Konwertuj między pikselami a REM Darmowe narzędzie online, bez rejestracji, bez nachalnych reklam. Użyj teraz.
Dlaczego deweloperzy webowi konwertują piksele na REM?
Nowoczesne dobre praktyki CSS zalecają używanie jednostek względnych (REM, EM) zamiast absolutnych pikseli dla rozmiarów czcionek i odstępów. Pozwala to użytkownikom, którzy ustawili większy rozmiar czcionki w ustawieniach przeglądarki, zobaczyć proporcjonalnie powiększony tekst — podstawowy wymóg dostępności webowej.
- Rozmiary czcionek: Zamiast
font-size: 16pxużyjfont-size: 1rem. Jeśli bazowy rozmiar czcionki przeglądarki użytkownika wynosi 20px, wszystko skaluje się proporcjonalnie — strona pozostaje czytelna dla osób niedowidzących. - Odstępy i padding: Marginesy i pady w REM dostosowują się do ustawień tekstu użytkownika.
padding: 1.5remjest bardziej dostępny niżpadding: 24px. - Wdrażanie systemu projektowania: Figma i Sketch eksportują w pikselach. Konwertuj na REM przed pisaniem CSS, żeby system był dostępny od początku.
- Media queries: Media queries oparte na REM respektują ustawienia rozmiaru tekstu użytkownika.
@media (min-width: 48rem)aktywuje się przy 768px przy domyślnej czcionce 16px. - Biblioteki komponentów: Komponenty budowane w REM zachowują się spójnie w różnych kontekstach bazowego rozmiaru czcionki — ważne przy tworzeniu systemów projektowania wielokrotnego użytku.
REM vs EM: REM (Root EM) jest zawsze relatywny do rozmiaru czcionki elementu głównego (html) — stały i przewidywalny w całym dokumencie. EM jest relatywny do rozmiaru czcionki bieżącego elementu — może nieprzewidywalnie kumulować się w zagnieżdżonych elementach. REM jest preferowany dla większości zastosowań.
Jaki jest domyślny rozmiar czcionki w przeglądarce?
16px we wszystkich głównych przeglądarkach (Chrome, Firefox, Safari, Edge). Użytkownik może to zmienić w ustawieniach — i właśnie dlatego używamy REM. Domyślnie 1rem = 16px, ale może wynosić 18, 20 lub 12px zależnie od ustawień użytkownika.
Dlaczego niektórzy deweloperzy używają html { font-size: 62.5% }?
62,5% z 16px = 10px — ułatwia obliczenia: 1,6rem = 16px, 2,4rem = 24px. Jednak nadpisuje to ustawienia czcionki użytkownika, częściowo niwelując korzyści dostępności REM. Lepszym podejściem jest użycie CSS calc() lub po prostu dzielenie przez 16.
Kiedy używać PX zamiast REM?
PX dla obramowań (border: 1px powinien zawsze wynosić 1px), cieni i elementów, gdzie ważny jest dokładny rozmiar w pikselach niezależnie od ustawień. REM dla rozmiarów czcionek, paddingu, marginesów i każdego odstępu, który powinien skalować się z tekstem.
Jaka jest różnica między REM, EM i PX?
PX jest absolutny — rozmiar się nie zmienia. EM jest relatywny do rozmiaru czcionki elementu nadrzędnego, może kumulować się przy zagnieżdżeniu. REM jest relatywny do czcionki głównej, stały w całym dokumencie. Dla dostępnego projektu używaj REM dla czcionek i odstępów.
Jak przekonwertować cały projekt z pikseli na REM?
Podziel każdą wartość w pikselach przez bazowy rozmiar czcionki (domyślnie 16). 24px ÷ 16 = 1,5rem. Funkcje Sass (px-to-rem()) lub wtyczki PostCSS mogą automatyzować tę konwersję w całym projekcie. Są też rozszerzenia VS Code do automatycznej konwersji podczas pisania.
REM vs EM vs PX vs VW/VH vs procenty
PX jest absolutny — precyzyjny, ale nieadaptacyjny. REM skaluje się z czcionką główną — optymalny dla typografii i dostępnych odstępów. EM skaluje się z czcionką elementu nadrzędnego — przydatny dla odstępów na poziomie komponentu. VW/VH to procenty okna widoku — dobre dla płynnych układów. Procenty są relatywne do elementu nadrzędnego — niezbędne dla szerokości kolumn. Nowoczesne CSS łączy je: REM dla typografii, VW/VH dla ogólnego układu, procenty dla szerokości kolumn.