Konwerter PX na REM |CSSKalkulator i ściągawka

Konwertuj PX na REM lub REM z powrotem na PX dla CSS i projektu interfejsu użytkownika. Zmień podstawowy rozmiar czcionki, użyj ściągawki na żywo i sprawdź pobliskie żetony odstępów Tailwind.

Konwerter PX/REM

rem = px / główny rozmiar czcionki

pikseli
Wspólne podstawy
px
rem

Ściągawka

PXREMNajbliższy Tailwind
4px0.25remp-1
8px0.5remp-2
10px0.625rem-
12px0.75remp-3
14px0.875rem-
16px1remp-4
18px1.125rem-
20px1.25remp-5
24px1.5remp-6
32px2remp-8
40px2.5remp-10
48px3remp-12
64px4remp-16
80px5remp-20
96px6remp-24

Instrukcja obsługi

  1. Potwierdź rozmiar czcionki HTML swojego projektu w polu Rozmiar podstawowy. Typową wartością domyślną jest 16 pikseli.
  2. Wpisz wartość projektową, np. „24”, w polu wejściowym PX.
  3. Wejście REM zostaje natychmiast zaktualizowane do wartości „1,5 rem”; możesz także wpisać 2rem, aby uzyskać 32px.
  4. Skorzystaj z poniższej ściągawki, aby poznać popularne rozmiary czcionek, wartości odstępów i odniesienia do odstępów Tailwind.

Główne funkcje

  • Natychmiastowa konwersja dwukierunkowa: Wpisz PX lub REM i natychmiast uzyskaj przeciwną wartość, bez przycisku obliczania.
  • Niestandardowy podstawowy rozmiar czcionki: Zacznij od 16 pikseli lub zmień na 10, 14 pikseli lub dowolny rozmiar główny specyficzny dla projektu.
  • Wbudowana ściągawka: Typowe rozmiary są aktualizowane wraz z rozmiarem podstawowym, w tym odpowiedniki 12 pikseli, 16 pikseli, 24 pikseli i 32 pikseli.
  • Odniesienie do odstępów tylnego wiatru: Zobacz typowe żetony odstępów tylnego wiatru, aby dopasować wartości pikseli.
  • Lokalnie i szybko: Wszystkie obliczenia przebiegają w pamięci przeglądarki bez żądań sieciowych.

Powiązane narzędzia

CSSMinimalizator i upiększacz — statystyki, bezpieczna kompresja, lokalnie

Zminimalizuj lub upiększ CSS lokalnie — bez przesyłania. Usuń komentarze/białe znaki, wyświetl statystyki oszczędności rozmiaru lub usuń minifikację kodu, aby zapewnić czytelność. Skopiuj wynik teraz.

Bezpieczny JSONFormater i generator typów - Gen. typów lokalnych

Bezpieczny program formatujący JSON: sformatuj, sprawdź i napraw JSON lokalnie. Upiększ/zmniejsz, podświetl błędy, wygeneruj TypeScript lub Zod, przekonwertuj na XML— prywatny. Spróbuj teraz.

Bezpłatny tester i oceniający JSONPath | Lokalne zapytania w czasie rzeczywistym

Bezpłatny tester i ewaluator JSONPath dla APIJSON. Wyodrębniaj pasujące węzły w czasie rzeczywistym, sprawdzaj ścieżki i kopiuj wyniki JSON, podczas gdy analizowanie pozostaje lokalne w przeglądarce.

Konwerter JSON na CSV— lokalny eksport arkusza kalkulacyjnego

Konwertuj obiekty lub tablice JSON na CSV lokalnie w przeglądarce. Spłaszcz pola, wyświetl podgląd wyniku, a następnie skopiuj lub pobierz CSV bez przesyłania danych.

Konwerter CSV na JSON- lokalny parser czasu rzeczywistego

Konwertuj tekst lub pliki CSV na tablice JSON lokalnie w przeglądarce. Obsługuje nagłówki, ograniczniki przecinków/średników/tabulatorów, pliki typu „przeciągnij i upuść”, kopiuj i pobieraj bez przesyłania.

JSONDiffSprawdzanie — lokalne porównanie semantyczne

Porównaj dwa dokumenty JSON lokalnie w przeglądarce. Sortuj klucze obiektów pod kątem różnicy semantycznej, ignoruj ​​szumy związane z kolejnością kluczy i oznaczaj dodane, usunięte i zmodyfikowane pola bez przesyłania.

JSONMinifier i kompresor

Zmniejsz JSON do jednego wiersza, usuń wcięcia i podziały wierszy oraz porównaj rozmiar oryginalny, rozmiar zminimalizowany, zapisane bajty i zaoszczędzoną wartość procentową.

Konwerter JSON na TypeScript — generuj interfejsy lokalnie

Bezpłatny internetowy konwerter JSON na TypeScript. Natychmiast generuj interfejsy i typy TypeScript na podstawie ładunków JSON. W 100% prywatne generowanie kodu po stronie klienta.

Logika obliczeń

  • Wzór PX na REM: REM = PX / rozmiar podstawowy.
  • Wzór REM na PX: PX = REM × Rozmiar podstawowy.
  • Przy domyślnym rozmiarze katalogu głównego przeglądarki, 16px = 1rem i 24px = 1,5rem.

Najczęściej zadawane pytania (FAQ)

Ile pikseli to 1 rem?

W większości przeglądarek 1rem jest domyślnie równy 16px. Jeśli Twój projekt zmienia html {font-size }, zamiast tego użyj tego rozmiaru głównego.

Jaka jest różnica między PX a REM?

PX to absolutna jednostka pikseli. REM zależy od głównego rozmiaru czcionki, co pomaga układom uwzględniać preferencje użytkownika dotyczące rozmiaru czcionki.

Dlaczego w niektórych projektach używana jest podstawa o rozmiarze 10 pikseli?

Niektóre zespoły ustawiają html { rozmiar czcionki: 62,5%; }, więc 1rem to około 10 pikseli dla łatwiejszej matematyki mentalnej. Rozważ dostępność przed jej przyjęciem.

Czy to również konwertuje EM?

Nie. To narzędzie koncentruje się na PX i REM. EM zależy od rozmiaru czcionki bieżącego elementu, dlatego nie należy go traktować jako tej samej konwersji.

Czy przesłano jakieś CSS lub dane projektowe?

Nie. Konwersja odbywa się lokalnie w przeglądarce, bez konieczności obliczania serwera lub przesyłania plików.