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.

Instrukcja użycia

🚀 Szybki start

Wpisz wartość i jednostkę, np. 16 + px albo 1 + rem.
Najpierw wybierz jednostkę źródłową i wpisz wartość, potem jednostkę docelową; przycisk „Zamień” szybko odwraca kierunek.
Urządzenia mobilne: użyj strzałki w prawym górnym rogu panelu, aby przełączać widok Z/Na.
Ustawienia są dostępne dla rem/em/%/vw/vh; przy jednostkach bezwzględnych są wyłączone.
Przeglądaj wyniki: inne jednostki są liczone natychmiast i można je kopiować.
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.

🧭 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

Czym różnią się rem i em?

rem odnosi się do rozmiaru fontu root i ułatwia globalne skalowanie; em odnosi się do fontu elementu nadrzędnego i lepiej nadaje się do lokalnego skalowania w obrębie komponentu.

Jak przeliczyć wartości px z projektu na rem?

Ustaw rozmiar fontu root (np. 16px), a następnie podawaj wartości w px; 16px → 1rem, 24px → 1,5rem itd. Dla tekstu i odstępów preferuj rem.

Kiedy używać vw/vh zamiast %?

vw/vh odnoszą się do viewportu; % do wymiaru elementu nadrzędnego. Dla sekcji pełnoekranowych nadają się vw/vh, dla szerokości wewnątrz kontenera najczęściej lepsze jest %.

Jak powiązać px z jednostkami druku (pt/cm)?

Jednostki drukarskie zależą od DPI. Ustaw DPI (domyślnie 96) i użyj konwertera px ↔ pt/cm jako szacunku; pamiętaj, że sterowniki drukarki mogą wprowadzać własne korekty.