Przejdź do treści
Konwerter godzin rozpoczęcia meczów MŚ jest dostępnySprawdź godziny rozpoczęcia w swojej strefie i dodaj przypomnienia w kalendarzu.

Konwerter jednostek CSS

Konwertuj jednostki CSS jeden do jednego między px, rem, em, %, vw, vh, vmin, vmax, pt, cm, mm, q, ex i ch lokalnie, korzystając z rozmiaru czcionki głównej, rozmiaru czcionki nadrzędnej, rzutni, DPI i ustawień odniesienia procentowego.

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

Długość

Typografia

Obszar widoku

Procenty

Względem rozmiaru fontu root
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 kontekst rem/em/%/vw/vh, gdy potrzebny
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).
Rozmiar fontu elementu nadrzędnego: wpływa na konwersję em i % (gdy odniesieniem jest „rozmiar fontu”). Przydatne do lokalnego skalowania komponentów.
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.
DPI (kropki na cal): dla jednostek fizycznych pt/szt./cal/cm/mm/q ↔ px. Domyślne oszacowanie CSS to 96 DPI; wartości niestandardowe są szacunkami dotyczącymi wydruku/urządzenia, a nie ostatecznym obliczeniem układu przeglądarki.
Wskazówki: 1) 16 pikseli i 96 DPI to typowe podstawy; 2) sprawdź procenty układu, przełączając punkty przerwania; 3) te elementy sterujące pomagają w oszacowaniu czasu projektowania i nie zastępują ostatecznych obliczeń DOM/CSS przeglądarki.

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 to przybliżenia oparte na rozmiarze czcionki nadrzędnej; Wyniki nie stanowią kontroli metryk czcionek i różnią się w zależności od czcionki/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
Jednostki fizyczne ↔ px korzystają ze skonfigurowanej szacunkowej wartości DPI; praca w trybie drukowania/HiDPI nadal wymaga weryfikacji urządzenia lub dowodu

Prywatność i bezpieczeństwo

Przetwarzanie odbywa się w przeglądarce. Wartość wejściowa, jednostki From/To, wartości zapisane dla poszczególnych jednostek, rozmiar fontu root, rozmiar fontu rodzica, viewport, DPI, odniesienie procentowe i wybór breakpointu mogą pozostać w bieżącej sesji przeglądarki lub w pamięci przeglądarki. Jeśli zapiszesz obszar roboczy albo włączysz synchronizację WebDAV, te wartości mogą zostać zapisane zgodnie z ustawieniami synchronizacji. Wyniki konwersji są ponownie obliczane z bieżącej wartości, jednostek i ustawień kontekstu i nie są zapisywane jako oddzielne wyniki. Ta strona nie pobiera URL-i 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.

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