Конвертирането на CSS единици е процесът на преобразуване между различни дължини (px, em, rem, %, vw, vh и др.) използвани в уеб дизайна.
Абсолютни и относителни единици
CSS единиците обикновено се разделят на абсолютни и относителни. Абсолютните единици (px, pt, cm и др.) имат фиксиран размер, докато относителните (em, rem, %, vw, vh и др.) се изразяват като отношение към базова стойност.
px (Пиксел)
Най-често използваната единица, представлява една точка на екрана. Лесна за използване с фиксиран размер, но може да създаде проблеми с достъпността, тъй като игнорира потребителските настройки за шрифт.
em (Em)
Относителна единица базирана на размера на шрифта на родителския елемент. 1em = размер на шрифта на родителя. Изчислява се композитно при вложени структури, което може да доведе до неочаквани размери при дълбоко вграждане.
rem (Root Em)
Относителна единица базирана на кореновия елемент (html) шрифт. 1rem = font-size на html (обикновено 16px). За разлика от em, не се влияе от вложеността и е препоръчителна в съвременния CSS.
% (Процент)
Представлява пропорция спрямо родителския елемент. За font-size е спрямо размера на шрифта на родителя; за width — спрямо ширината на родителя. Базата зависи от свойството.
vw/vh (Единици на изгледа)
Единици базирани на размера на изгледа (viewport). 1vw = 1% от ширината на изгледа, 1vh = 1% от височината на изгледа. Позволяват гъвкави оформления, реагиращи на размера на екрана.
pt/pc (Печатни единици)
Единици използвани в печатарската индустрия. 1pt = 1/72 инч, 1pc = 12pt. Използват се в печатни стилове и при генериране на PDF, но за екран обичайно се предпочитат px или rem.
Физически единици (cm/mm/in)
Единици, които представят реална физическа дължина. 1in = 2.54cm = 25.4mm = 96px (CSS дефиниция). Използват се когато е необходима съвместимост с печатни материали, но размерът на екрана не е гарантиран.
Предимства на конвертиране в реално време
Този инструмент поддържа конвертиране в реално време и обновява резултатите при промяна на базовите стойности. Позволява бързи проверки за различни размери на екрана и настройки на шрифта.