Konwerter PX na REM
Przeliczaj długości CSS między px, rem, em, pt i innymi jednostkami. rem i em zależą od bazowego rozmiaru czcionki, więc wpisz bazę, według której przeliczasz.
Jak przeliczane są jednostki CSS
Bezwzględne jednostki CSS (px, pt, pc, in, cm, mm, Q) są zdefiniowane w specyfikacji W3C CSS Values and Units w następujący sposób.
| Jednostka | Definicja | W px |
|---|---|---|
| in (cal) | 1in = 2.54cm = 96px | 96 px |
| px (piksel) | 1px = 1/96 in | 1 px |
| pt (punkt) | 1pt = 1/72 in | 4/3 px (około 1,3333 px) |
| pc (pica) | 1pc = 1/6 in (12pt) | 16 px |
| cm (centymetr) | 1in = 2.54cm | około 37,7953 px |
| mm (milimetr) | 1cm = 10mm | około 3,77953 px |
| Q (ćwierć milimetra) | 1Q = 1/40 cm | około 0,944882 px |
Obliczenie używa dokładnych ułamków. Wartość, która nie dzieli się bez reszty (taka jak cm, mm lub Q w px), jest oznaczona jako „wartość zaokrąglona”.
rem i em zależą od bazowego rozmiaru czcionki
- rem jest względne wobec font-size elementu głównego (
html). Przy bazie 16px 1rem = 16px. Jeśli ustawiszhtml { font-size: 62.5% }, baza wynosi 10px (gdy domyślna wartość przeglądarki to 16px), a 1,6rem = 16px. - em jest względne wobec font-size elementu, w którym jest użyte. Wyjątkiem jest sama właściwość
font-size: gdy em jest użyte wfont-size, odnosi się do font-size odziedziczonego po elemencie nadrzędnym (tak mówi specyfikacja W3C). We właściwościach takich jakpaddingimarginem odnosi się do własnego font-size elementu. - Zagnieżdżone wartości em (na przykład 1,2em wewnątrz innego 1,2em, co daje 1,44) nie są tu obliczane. Jako bazę wpisz obliczony (rzeczywisty) font-size.
Wartość początkowa 16px to tylko wygodna wartość domyślna. To narzędzie przelicza według wpisanej przez Ciebie bazy (w px), a inna baza daje inny wynik w rem lub em.
Piksel CSS to nie piksel ekranu
Piksel CSS (px) nie jest fizycznym pikselem ekranu (pikselem urządzenia). To piksel referencyjny zdefiniowany jako 1/96 cala. Na ekranie o dużej gęstości jeden piksel CSS może być rysowany za pomocą kilku pikseli urządzenia (na przykład 2 × 2).
Przykłady
- 16px = 1rem = 1em = 12pt (przy bazie 16px)
- 24px = 2,4rem (przy bazie 10px)
- 1,6rem = 16px (przy bazie 10px)
- 1in = 96px = 72pt = 6pc = 2,54cm
- 10mm ≈ 37,79528px
- 0,75pt = 1px
Uwagi
- Jednostek zależnych od rozmiaru ekranu, rozmiaru elementu nadrzędnego lub kształtu czcionki (vw, vh, %, ch, ex itd.) nie da się przeliczyć na podstawie samej liczby, więc nie zostały uwzględnione.
- Wartość może mieć do 12 cyfr przed przecinkiem dziesiętnym i 6 miejsc po przecinku oraz może być ujemna (CSS dopuszcza ujemne długości, takie jak
margin: -10px). Baza musi być większa niż 0. Spacje służą jako separatory tysięcy (1 234,5); jako separatora dziesiętnego użyj przecinka. - Wyniki są wyświetlane z 7 cyframi znaczącymi. Możesz skopiować wartość w postaci wyświetlanej lub z 15 cyframi znaczącymi.
Źródła
- W3C, CSS Values and Units Module Level 3: definicje bezwzględnych jednostek długości oraz em i rem (sprawdzone 31 października 2026; strona była wersją Candidate Recommendation Draft z 22 marca 2024). Podaje rem jako font-size elementu głównego, a em jako obliczony font-size elementu lub elementu nadrzędnego, gdy jest użyte we właściwości
font-size.
Najczęściej zadawane pytania
Ile px to 1rem?
To zależy od font-size elementu głównego (html). Przy bazie 16px jest to 16px, ale jeśli font-size elementu html się zmieni, zmieni się też rozmiar 1rem. Wpisz swoją bazę, aby przeliczyć.
Czy używać px, czy pt?
px i rem są powszechne na ekranach. pt częściej stosuje się w CSS do druku. Ponieważ 1pt = 4/3 px, 12pt to 16px.
Jaka jest różnica między em a rem?
rem jest względne wobec font-size elementu głównego, więc ma ten sam rozmiar, gdziekolwiek go użyjesz. em jest względne wobec font-size w miejscu użycia, więc zagnieżdżone elementy mogą zmieniać jego rozmiar.