Конвертор PX в REM

Как да използвате конвертора PX в REM

1. Задайте Базов размер на шрифта (px). Той е 16 във всички големи браузъри, освен ако стиловият ви файл не го променя. Бутоните под полето превключват на 16 px, 10 px (трикът html { font-size: 62.5%; }) или 18 px.
2. Ако работите с em, задайте Размер на шрифта на родителя за em (px): изчисленият размер на шрифта на елемента, който съдържа оня, който оформяте.
3. Под Преобразуване на стойност въведете в Пиксели (px), REM или EM. Другите две полета се обновяват, докато пишете, а редът отдолу показва използваното деление.
4. Таблица за масово преобразуване изброява често срещани размери. Заменете Стойности в пиксели със свои дизайн токени (скала на отстоянията, скала на шрифтовете…) и използвайте Копирай таблицата, за да поставите резултата в електронна таблица или дизайнерски документ.
5. За да мигрирате съществуващ код, поставете го в CSS за преобразуване, изберете опциите и щракнете върху Конвертирай px в rem. Зареди пример показва малък стилов файл. Копирайте Преобразуван CSS с бутона Копирай.

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

Формулите

• rem = px ÷ базов размер на шрифта. При стандартните 16 px, 24px = 24 ÷ 16 = 1,5rem.
• em = px ÷ размер на шрифта на родителя. В заглавие от 20 px, 10px = 0,5em.
• px = rem × базов размер на шрифта, а px = em × размер на шрифта на родителя.

rem или em: кое да използвам?

rem („root em“) винаги се отнася до размера на шрифта на елемента html, така че 1.5rem означава едно и също навсякъде в страницата. Това е най-безопасният избор за размери на шрифтове, отстояния, максимални ширини и разстояния в оформлението.

em се отнася до размера на шрифта на самия елемент (за font-size, на родителя). Той се натрупва: списък с 0,9em, вложен три пъти, стига до 0,9 × 0,9 × 0,9 = 73 % от основата. Това прави em удобен за неща, които трябва да се мащабират със собствения си текст (вътрешния отстъп на бутон, размера на икона до надпис) и рискован за глобалната типография.

Защо rem е важен за достъпността

Много хора увеличават стандартния размер на шрифта в настройките на браузъра си (например от 16 на 20 или 24 px), вместо да увеличават всяка страница. Размерите в px игнорират тази настройка; размерите в rem или em я следват. Използването на rem за текст и отстояния позволява на цялото оформление да расте според избора на читателя, което помага за критерий 1.4.4 на WCAG 2.2 (преоразмеряване на текста до 200 %).

По същата причина избягвайте да задавате html { font-size: 16px; } в px: използвайте процент (100% или 62.5%, ако искате 1rem = 10px), така че настройката на потребителя да продължи да се прилага.

Какво променя конверторът на CSS

Той замества числата, следвани от px, в декларациите със стойността, разделена на базовия размер на шрифта. Никога не пипа коментари, низове и стойности на url().

• Запази ширините на рамки и контури в px: border, border-*-width, outline, outline-offset и column-rule остават в px, така че тънките линии да са ясни. border-radius все пак се преобразува.
• Запази стойностите 1px: всяка стойност между −1px и 1px остава каквато е.
• Преобразувай медийните заявки в em (база 16px): в условията на @media rem и em винаги се отнасят до началния размер на шрифта на браузъра, никога до вашето правило за html, така че инструментът дели на 16 и записва там em, независимо от вашия базов размер. Когато опцията не е отметната, медийните заявки запазват px.