Konwersja jednostek CSS to proces przeliczania pomiędzy różnymi jednostkami długości (px, em, rem, %, vw, vh itd.) używanymi w projektowaniu stron.
Jednostki absolutne i względne
Jednostki CSS dzielą się na absolutne i względne. Jednostki absolutne (px, pt, cm itd.) mają stały rozmiar, a jednostki względne (em, rem, %, vw, vh itd.) wyrażone są jako proporcja względem wartości bazowej.
px (Pixel)
Najczęściej używana jednostka reprezentująca jeden punkt na ekranie. Łatwa w użyciu ze względu na stały rozmiar, ale może powodować problemy z dostępnością, ponieważ ignoruje ustawienia czcionki użytkownika.
em (Em)
Jednostka względna bazująca na rozmiarze czcionki elementu rodzica. 1em = font-size rodzica. W zagnieżdżonych strukturach obliczenia się kumulują, co może prowadzić do nieoczekiwanych rozmiarów.
rem (Root Em)
Jednostka względna bazująca na rozmiarze czcionki elementu root (html). 1rem = html font-size (zwykle 16px). W przeciwieństwie do em nie jest zależna od zagnieżdżeń, zalecana w nowoczesnym CSS.
% (Procent)
Reprezentuje proporcję względem rozmiaru elementu rodzica. Dla font-size bazuje na rodzicu; dla width na szerokości rodzica. Punkt odniesienia zależy od właściwości.
vw/vh (Jednostki viewport)
Jednostki oparte na rozmiarze viewportu. 1vw = 1% szerokości viewportu, 1vh = 1% wysokości viewportu. Umożliwiają elastyczne układy reagujące na rozmiar ekranu.
pt/pc (Jednostki drukarskie)
Jednostki używane w branży poligraficznej. 1pt = 1/72 cala, 1pc = 12pt. Stosowane w CSS do druku i generowania PDF; na ekranie zwykle używa się px lub rem.
Jednostki fizyczne (cm/mm/in)
Jednostki reprezentujące rzeczywistą długość fizyczną. 1in = 2.54cm = 25.4mm = 96px (definicja CSS). Przydatne, gdy potrzebna jest zgodność z materiałami do druku, lecz fizyczny rozmiar ekranu nie jest gwarantowany.
Zalety konwersji w czasie rzeczywistym
To narzędzie obsługuje konwersję w czasie rzeczywistym i natychmiast aktualizuje wyniki po zmianie wartości bazowych. Umożliwia szybkie sprawdzenie wyglądu na różnych ekranach i ustawieniach czcionki.