Przejdź do głównej treści
LibraTool logoLibraTool

Konwerter pikseli na REM za darmo

Konwertuj między px, rem, em, pt, vw, vh i % z konfigurowalnym bazowym rozmiarem czcionki. Zawiera tabelę referencyjną dla typowych rozmiarów pikseli.

Działa offline po wczytaniu
1rem

Kontekst (wpływa na rem/em/vw/vh/%)

Wszystkie przeliczenia dla 16 px

Najbliższe tokeny Tailwind (przy głównym rozmiarze 16px)

Typowe rozmiary pikseli → rem (baza 16px)

Konwertuj wklejony CSS

Typowe zastosowania

  • PX na REM do Tworzenia Stron InternetowychKonwertuj wartości pikseli na jednostki rem dla skalowalnego i dostępnego CSS. Ustaw rozmiar czcionki bazowej i natychmiast zobaczmy wszystkie równoważne wartości.
  • Jednostki CSS do Responsywnego ProjektowaniaKonwertuj między px, vw, vh i %, aby budować układy, które prawidłowo reagują na różne rozmiary i orientacje ekranu.
  • Konwertuj Specyfikacje Projektowania na Jednostki CSSPrzetłumacz wartości pikseli Figma lub Sketch na jednostki rem/em dla czystej, skalowalnej implementacji CSS.
  • Odniesienie Jednostek Tailwind CSSZrozum, jak klasy rozmiaru Tailwind CSS mapują się na wartości pikseli i rem w celu precyzyjnej implementacji.
  • Konwertuj Jednostki CSS dla Arkuszy Stylów DrukowaniaKonwertuj między px, pt i rem dla zapytań o media drukowania i wyjścia CSS PDF.

Jak to działa

Wszystkie konwersje działają w całości w przeglądarce, z użyciem ręcznie napisanego silnika arytmetycznego bez zależności. Narzędzie przelicza między siedmioma jednostkami CSS (px, rem, em, pt, vw, vh i %), kierując każde obliczenie przez piksele jako wspólną bazę i stosując proste dzielenie lub mnożenie względem ustawionego rozmiaru czcionki głównej, rozmiaru czcionki rodzica lub wymiarów okna.

  1. 1
    Ustaw wartości kontekstu
    Przed konwersją ustawiasz cztery liczby, które nadają sens względnym jednostkom CSS: rozmiar czcionki głównej (domyślnie 16px — domyślna wartość przeglądarki), rozmiar czcionki elementu nadrzędnego (dla konwersji em i %) oraz szerokość i wysokość okna (dla vw i vh). To te same wartości, których przeglądarka użyłaby przy rozwiązywaniu CSS w czasie działania.
  2. 2
    Piksel jako uniwersalny pośrednik
    Konwerter najpierw wywołuje toPixels(), aby sprowadzić dane do surowej liczby pikseli — na przykład 1.5rem staje się 1,5 × baseFontPx, a 50vw staje się 0,5 × vpWidth. Następnie fromPixels() dzieli tę liczbę pikseli przez odpowiedni współczynnik jednostki docelowej. Wszystkie siedem jednostek jest pokazywanych jednocześnie w tabeli konwersji.
  3. 3
    Wyszukiwanie najbliższego tokenu Tailwind
    Po konwersji narzędzie oblicza wartość w rem i przeszukuje dwie wpisane na stałe tabele — trzynaście tokenów rozmiaru czcionki Tailwind (od text-xs do text-9xl) i skalę odstępów — znajdując najbliższe dopasowanie według bezwzględnej odległości. Znak = oznacza, że wartość jest dokładnym tokenem; ≈ oznacza najbliższe przybliżenie.
  4. 4
    Zbiorcze przepisywanie CSS przez wyrażenia regularne
    Panel wklejania CSS przyjmuje surowy tekst CSS i stosuje podstawienie wyrażeniem regularnym: w trybie px→rem dopasowuje każdy token px i zastępuje część liczbową przez value/baseFontPx + rem; w trybie rem→px robi odwrotnie. Wyświetlana jest liczba podstawień, abyś mógł sprawdzić, ile wartości przepisano.

Powiązane narzędzia

📏

Konwerter jednostek

Konwertuj między jednostkami długości, masy, temperatury, powierzchni, objętości i innych.

Wypróbuj
📐

Generator CSS clamp()

Generuj płynną wartość CSS clamp() dla responsywnej typografii i odstępów. Ustaw minimalny/maksymalny rozmiar i zakres widoku, zobacz podgląd na żywo i skopiuj jednowierszowy CSS.

Wypróbuj
🟦

Generator siatki CSS

Wizualnie zaprojektuj siatkę CSS — ścieżki, jednostki i przerwy — i skopiuj wygenerowany CSS i HTML.

Wypróbuj

Często zadawane pytania