Конвертер CSS-единиц
Конвертация между CSS-единицами: px, rem, em, vw, vh и %. Настройка базового шрифта и размеров вьюпорта.
Настройки
Все эквиваленты
| Единица | Значение |
|---|---|
| px | 16px |
| rem | 1rem |
| em | 1em |
| vw | 0.833333vw |
| vh | 1.48148vh |
| % | 100% |
= 16 px
Справочник (px → rem)
| px | rem | em | vw | vh |
|---|---|---|---|---|
| 8px | 0.5rem | 0.5em | 0.416667vw | 0.740741vh |
| 12px | 0.75rem | 0.75em | 0.625vw | 1.11111vh |
| 14px | 0.875rem | 0.875em | 0.729167vw | 1.2963vh |
| 16px | 1rem | 1em | 0.833333vw | 1.48148vh |
| 18px | 1.125rem | 1.125em | 0.9375vw | 1.66667vh |
| 20px | 1.25rem | 1.25em | 1.04167vw | 1.85185vh |
| 24px | 1.5rem | 1.5em | 1.25vw | 2.22222vh |
| 32px | 2rem | 2em | 1.66667vw | 2.96296vh |
| 48px | 3rem | 3em | 2.5vw | 4.44444vh |
| 64px | 4rem | 4em | 3.33333vw | 5.92593vh |
Как конвертировать CSS-единицы
- Задайте базовый размер шрифта (по умолчанию: 16px) и размеры вьюпорта
- Введите значение и выберите единицу (px, rem, em, vw, vh или %)
- Просмотрите все эквивалентные значения в других единицах
- Используйте справочную таблицу для быстрого перевода px в rem
Примеры использования
- •Адаптивный дизайн: перевод фиксированных пиксельных значений в гибкие rem или vw
- •Передача макета: перевод пиксельных спецификаций из Figma/Sketch в CSS rem
- •Доступность: использование rem для учёта пользовательских настроек размера шрифта
- •Вёрстка: расчёт размеров секций относительно вьюпорта
Формула
Конвертация CSS-единиц зависит от базового размера шрифта и размеров вьюпорта. rem = px / базовыйШрифт. vw = px / ширинаВьюпорта × 100. vh = px / высотаВьюпорта × 100.
Часто задаваемые вопросы
В чём разница между rem и em?
rem относится к размеру шрифта корневого элемента (html). em — к размеру шрифта родительского элемента. На уровне корня они идентичны.
Какой размер шрифта по умолчанию в браузере?
Большинство браузеров используют 16px по умолчанию. Это значит, что 1rem = 16px, если корневой размер не изменён.
Когда использовать vw/vh?
Используйте vw (ширина вьюпорта) и vh (высота вьюпорта) для элементов, которые должны масштабироваться пропорционально окну браузера.
Как перевести px в rem?
Разделите значение в пикселях на базовый размер шрифта. При 16px по умолчанию: 24px ÷ 16 = 1.5rem.
К чему относится единица %?
Единица % зависит от контекста в CSS. Для font-size — относительно font-size родителя. Для width — относительно ширины родителя.