Przejdź do treści
Logo CrateX.app

CrateX.app

Konwerter jednostek CSS

Konwertuj lokalnie jednostki CSS jeden do jednego między px, rem, em, %, vw, vh, vmin, vmax, pt, pc, in, cm, mm, q, ex i ch, korzystając z rozmiaru fontu root, referencyjnego rozmiaru fontu EM, rozmiaru viewportu oraz ustawień odniesienia procentowego. Bezwzględne jednostki CSS używają stałej proporcji 1in = 96px.

px
Stuknij strzałkę, aby przełączyć jednostki

Długość

Typografia

Obszar widoku

Procenty

rem
Stuknij strzałkę, aby przełączyć jednostki

Długość

Typografia

Obszar widoku

Procenty

Konwerter jednostek CSS

Szybki start

1
Wpisz wartość i wybierz jednostkę źródłową
2
Wybierz jednostkę docelową lub użyj Zamień, aby odwrócić
3
Ustaw root/odniesienie EM/%/viewport w razie potrzeby; dla EM użyj rzeczywistego rozmiaru fontu właściwości.
4
Skopiuj przeliczony wynik
5
Przełącz presety viewportu do sprawdzania vw/vh

Typowe scenariusze

Zastosowania

layouty responsywne, przekazanie z designu do frontendu, powiązanie z drukiem/wyświetlaczami o różnej gęstości, ujednolicone konwencje stylu.

Wskazówki użycia

Ustal bazę: 16px jako rozmiar root jest powszechny i ułatwia w głowie przeliczenia rem ↔ px.
Tekst: preferuj rem, aby wspierać globalne skalowanie i dostępność; em używaj do lokalnego skalowania w komponentach.
Użyj jednostek rzutni do oszacowania układu: połącz z punktami przerwania i ograniczeniami min/max, aby uniknąć skrajności
Ułamki i zaokrąglanie: zachowaj rozsądną dokładność, by uniknąć nieczytelnych wartości.

Parametry konwersji i kontekstu

Bazowy rozmiar REM (root): decyduje o tym, jak rem przekłada się na px. Często przyjmuje się 16px, co ułatwia szybkie przeliczanie (1rem ≈ 16px).
Referencyjny rozmiar fontu EM: wprowadź rozmiar fontu faktycznie używany przez daną właściwość. em zwykle używa obliczonego rozmiaru fontu bieżącego elementu; w przypadku font-size i podobnych właściwości względnych względem fontu użyj rozmiaru fontu elementu nadrzędnego. To odniesienie służy również do przybliżania ex/ch oraz do obliczania % po wybraniu opcji „Rozmiar fontu”.
Odniesienie dla %: wybierz, czy % ma być liczone względem rozmiaru fontu, szerokości czy wysokości. W layoutach wybierz szerokość/wysokość, w typografii – rozmiar fontu.
Presety breakpointów: Telefon/Tablet/Komputer/duży ekran ustalają przykładowe wymiary viewportu, aby łatwiej ocenić zachowanie układu.
Rozmiar viewportu: używany do konwersji vw/vh/vmin/vmax i % (gdy odniesieniem jest wymiar kontenera). Rzeczywisty viewport może się różnić przez paski systemowe.
Wskazówki: 1) 16px to często używany rozmiar fontu root i odniesienia EM, ale należy podać rozmiar fontu faktycznie używany przez daną właściwość; 2) sprawdzaj procentowe wartości układu, przełączając breakpointy; 3) te ustawienia ułatwiają szacowanie na etapie projektowania, ale nie zastępują ostatecznych obliczeń DOM/CSS wykonywanych przez przeglądarkę. Jednostki bezwzględne zawsze używają proporcji 1in = 96px.

Ograniczenia i kompatybilność

% odniesienia zależy od właściwości CSS, zawierającej blok i tryb układu; to narzędzie używa wybranego rozmiaru czcionki/szerokości/wysokości rzutni do oszacowania, a nie rzeczywistego pomiaru elementu nadrzędnego/kontenera
ex/ch są tutaj przybliżane na podstawie referencyjnego rozmiaru fontu EM; wyniki nie stanowią analizy metryk fontu i różnią się w zależności od fontu oraz przeglądarki.
Klasyczne vw/vh/vmin/vmax różnią się w zależności od pasków przewijania/pasków adresu/bezpiecznych obszarów; to narzędzie nie oblicza jednostek zapytania dvh/svh/lvh, vi/vb, obszaru bezpiecznego ani kontenera
Konwersje bezwzględnych jednostek CSS używają stałej proporcji 1in = 96px. Powiązanie fizycznych pikseli ekranu z rozmiarem wydruku wymaga osobnego procesu dla urządzenia lub druku, którego to narzędzie nie zapewnia.

Prywatność i bezpieczeństwo

Przetwarzanie odbywa się w przeglądarce. Wartość wejściowa, jednostki źródłowa i docelowa, wartości zapisane w pamięci podręcznej dla poszczególnych jednostek, rozmiar fontu root, referencyjny rozmiar fontu EM, viewport, odniesienie procentowe i wybór breakpointu mogą pozostać w bieżącej sesji lub pamięci przeglądarki. Jeśli zapiszesz obszar roboczy albo włączysz synchronizację WebDAV, wartości te mogą zostać zapisane zgodnie z ustawieniami synchronizacji. Wyniki konwersji są ponownie obliczane na podstawie bieżącej wartości, jednostek i ustawień kontekstu i nie są przechowywane jako oddzielne wyniki. Ta strona nie pobiera adresów URL ani nie wysyła wartości do konwersji po stronie serwera. Na urządzeniach współdzielonych w razie potrzeby wyczyść wartości, ustawienia i dane witryny.

Najczęstsze pytania

4

Przejdź do kolejnego kroku z tymi powiązanymi narzędziami.

O nas

O nas
Cennik

Prawne

Regulamin
Polityka prywatności
Polityka cookies

Preferencje

Zarządzaj cookies

Całe przetwarzanie narzędzi odbywa się lokalnie w Twojej przeglądarce.