Przejdź do treści
Logo CrateX.app

CrateX.app

Konwerter jednostek CSS

Konwerter jednostek CSS

Konwerter jednostek CSS: Obsługuje konwersję między jednostkami CSS, takimi jak px, em, rem, %, vw, vh, zapewniając responsywne ustawienia punktów przerwania. Automatycznie oblicza wartości zależne od kontekstu, odpowiednie do tworzenia responsywnych układów, wdrażania frontend i adaptacji stylów.

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

Długość

Typografia

Viewport

Procenty

Względem rozmiaru fontu root
rem
Stuknij strzałkę, aby przełączyć jednostki

Długość

Typografia

Viewport

Procenty
Konwerter jednostek CSS

Szybki start

1
Wpisz wartość i jednostkę, np. 16 + px albo 1 + rem.
2
Najpierw wybierz jednostkę źródłową i wpisz wartość, potem jednostkę docelową; przycisk „Zamień” szybko odwraca kierunek.
3
Urządzenia mobilne: użyj strzałki w prawym górnym rogu panelu, aby przełączać widok Z/Na.
4
Ustawienia są dostępne dla rem/em/%/vw/vh; przy jednostkach bezwzględnych są wyłączone.
5
Przeglądaj wyniki: inne jednostki są liczone natychmiast i można je kopiować.
6
Breakpointy: przełączaj presety Telefon/Tablet/Komputer, aby sprawdzić zachowanie na różnych szerokościach.

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.

Dodatkowy scenariusz

konwerter em, jednostki viewport i kalkulator CSS można obsłużyć w tym samym przepływie, aby szybciej sprawdzić wynik przed kopiowaniem lub eksportem.

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.
Układ: używaj jednostek viewportu do sekcji pełnej szerokości; łącz z breakpointami i ograniczeniami min/max, by uniknąć skrajnych rozciągnięć.
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 (piksele na cal): parametr do przeliczania pt/pc/in/cm/mm/q ↔ px. Dla Web domyślnie 96 DPI; dla druku/hi‑DPI wybierz wartości zgodne z urządzeniem.
Wskazówki: 1) często używaj 16px i 96 DPI jako baz; 2) przy layoutach opartych na % sprawdzaj wyniki w kilku breakpointach; 3) traktuj te parametry jako narzędzie do projektowania i komunikacji, a nie zastępstwo dla realnego renderingu w przeglądarce.

Ograniczenia i kompatybilność

limit_responsiveness
limit_precision
Jednostki ex/ch zależą od kroju pisma; są przydatne głównie w sytuacjach typograficznych, gdy odniesieniem ma być wysokość liter.
Jednostki viewportu mogą być zaburzone przez paski adresu, paski przewijania i strefy bezpieczne; traktuj wyniki jako przybliżenie.

Prywatność i bezpieczeństwo

Całe przetwarzanie odbywa się w Twojej przeglądarce; dane nie opuszczają Twojego urządzenia.

Najczęstsze pytania

4

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