CSS конвертор на единици

Справочник

CSS единици

CSS предлага както абсолютни, така и относителни единици. Абсолютните единици като px са фиксирани независимо от контекста. Относителните единици като rem, em и vw се мащабират спрямо референция — което ги прави съществени за адаптивни, достъпни оформления.

px, rem, em, vw

px (пиксели) — абсолютна единица. 1px е един пиксел, независим от устройството. Използвайте за рамки, сенки и елементи, които не трябва да се мащабират с размера на шрифта.

rem (root em) — относителна към размера на шрифта на кореновия (html) елемент. Размерът на коренния шрифт по подразбиране в браузъра е 16px. Предпочита се за размери на шрифтове и разстояния, защото уважава настройката на потребителя за размер на шрифта в браузъра.

em — относителна към размера на шрифта на родителския елемент. Може да се натрупва при вложени елементи. Полезна за вътрешни и външни отстъпи, които трябва да се мащабират с размера на шрифта на самия елемент.

vw (viewport width) — 1vw = 1% от ширината на прозореца. Чудесна за флуидна типография и оформления с пълна ширина, които се адаптират към размера на екрана.

Чести конверсии от px в rem

При стандартната база на браузъра от 16px: 12px = 0.75rem, 14px = 0.875rem, 16px = 1rem, 18px = 1.125rem, 20px = 1.25rem, 24px = 1.5rem, 32px = 2rem, 48px = 3rem. За viewport единици при дизайн 1440px: 14.4px = 1vw, 72px = 5vw.

Защо rem е предпочитан за достъпност

Използването на rem за размери на шрифта уважава предпочитанията на потребителя за размер на шрифта в браузъра. Когато потребител зададе браузъра на 20px вместо стандартните 16px, оформленията базирани на rem се мащабират пропорционално, докато базираните на px остават фиксирани. WCAG 1.4.4 (Преоразмеряване на текст) изисква текстът да може да бъде увеличен до 200% без загуба на съдържание или функционалност — единиците rem удовлетворяват това изискване по естествен начин.

Поверителност

Цялото конвертиране работи 100% във вашия браузър. Никакви данни не се изпращат към сървър.