Konwerter PX na REM
Natychmiast przeliczaj piksele, rem i em, a następnie korzystaj z tabeli CSS.
Tabela wartości
1px = 0.0625rem 2px = 0.125rem 3px = 0.1875rem 4px = 0.25rem 5px = 0.3125rem 6px = 0.375rem 7px = 0.4375rem 8px = 0.5rem 9px = 0.5625rem 10px = 0.625rem 11px = 0.6875rem 12px = 0.75rem 13px = 0.8125rem 14px = 0.875rem 15px = 0.9375rem 16px = 1rem 17px = 1.0625rem 18px = 1.125rem 19px = 1.1875rem 20px = 1.25rem 21px = 1.3125rem 22px = 1.375rem 23px = 1.4375rem 24px = 1.5rem 25px = 1.5625rem 26px = 1.625rem 27px = 1.6875rem 28px = 1.75rem 29px = 1.8125rem 30px = 1.875rem 31px = 1.9375rem 32px = 2rem 33px = 2.0625rem 34px = 2.125rem 35px = 2.1875rem 36px = 2.25rem 37px = 2.3125rem 38px = 2.375rem 39px = 2.4375rem 40px = 2.5rem 41px = 2.5625rem 42px = 2.625rem 43px = 2.6875rem 44px = 2.75rem 45px = 2.8125rem 46px = 2.875rem 47px = 2.9375rem 48px = 3rem 49px = 3.0625rem 50px = 3.125rem 51px = 3.1875rem 52px = 3.25rem 53px = 3.3125rem 54px = 3.375rem 55px = 3.4375rem 56px = 3.5rem 57px = 3.5625rem 58px = 3.625rem 59px = 3.6875rem 60px = 3.75rem 61px = 3.8125rem 62px = 3.875rem 63px = 3.9375rem 64px = 4rem
Jak używać
- Wpisz wartość i wybierz jednostkę.
- Ustaw bazowy rozmiar czcionki projektu.
- Użyj wyniku lub skopiuj tabelę.
O tym narzędziu
Piksele dobrze opisują pomiar projektu, ale jednostki rem i em ułatwiają tworzenie elastycznego CSS. Ten konwerter działa w obie strony. REM zależy od rozmiaru czcionki elementu root: przy bazie 16 pikseli 1rem oznacza 16px, a 24px to 1,5rem. W narzędziu em korzysta z tego samego wzoru, jednak w przeglądarce może dziedziczyć rozmiar po elemencie nadrzędnym, więc jego wartość zależy od kontekstu. Zmień bazę, gdy projekt używa innego rozmiaru root albo wspiera powiększanie tekstu przez użytkownika. Tabela od 1 do 64px pozwala szybko sprawdzić typowe wartości systemu projektowego. Cztery miejsca po przecinku zapewniają dokładność bez utraty czytelności kodu. Przy konwersji z rem pomnóż przez wybraną bazę, zamiast zawsze zakładać 16px. Rem sprawdza się przy odstępach i typografii zależnej od skali dokumentu, a em przy lokalnych relacjach komponentu. Obliczenia są wykonywane w przeglądarce, bez przesyłania plików lub danych projektu. Przy responsywnym interfejsie porównaj bazę z faktycznymi regułami root w arkuszu. Dzięki temu tabela pozostaje praktyczną pomocą podczas przeglądu projektu, a nie oderwanym od kodu ćwiczeniem matematycznym. Zdefiniuj bazę jako zmienną CSS, gdy wiele komponentów korzysta z jednego systemu. Tabela pozostanie wtedy zgodna z rzeczywistą wartością root nawet po zmianie rozmiaru tekstu. Przy zagnieżdżonych elementach sprawdź również dziedziczony kontekst em. Testuj wartości z komponentem po zmianie rozmiaru bazowego, bo zaokrąglenia mogą ujawnić różnice dopiero przy większych skalach.
Najczęstsze pytania
Podobne narzędzia
Kalkulator proporcji
Oblicz pasujące wymiary obrazu i filmu dla 16:9, 4:3, kwadratu, pionu, kina i własnych proporcji.
Podgląd Open Graph
Sprawdź karty Twittera, Discorda, Telegrama i LinkedIna oraz wygeneruj tagi Open Graph.
Generator placeholderów
Twórz pobierane placeholdery SVG i data URI z własnymi wymiarami, kolorami i tekstem.