Конвертер единиц CSS (px, rem, em, vw, pt…)
Переводите длины CSS между px, rem, em, %, vw, vh, vmin, vmax, pt, pc, in, cm, mm и Q с учётом своего размера шрифта корня и области просмотра. Бесплатно, мгновенно.
1remАбсолютные единицы соответствуют CSS: 1in = 96px = 2,54cm = 72pt = 6pc, 1Q = 0,25mm. rem зависит от размера шрифта корня, em и % — от шрифта родителя (как для font-size), vw/vh/vmin/vmax — от окна просмотра. Результат округляется до 4 знаков.
Что такое Конвертер единиц CSS?
Переводит длину CSS между абсолютными (px, pt, pc, in, cm, mm, Q) и относительными (rem, em, %, vw, vh, vmin, vmax) единицами. Задайте размер шрифта корня, размер шрифта родителя и размер области просмотра, чтобы относительные единицы считались для вашего реального контекста; все единицы показываются сразу.
Как пользоваться Конвертер единиц CSS
- Введите Значение и выберите единицы Из и В.
- Настройте Размер шрифта корня (для rem), Размер шрифта родителя (для em и %), а также ширину и высоту области просмотра.
- Скопируйте основной результат или нажмите на любую карточку единицы, чтобы скопировать это значение.
Пример
24px (root 16px)
1.5rem · 18pt · 1.25vw (1920px viewport)
Когда использовать Конвертер единиц CSS
Используйте при переводе макетов в px в CSS на основе rem или чтобы выяснить, что означает значение vw на конкретном экране. % эквивалентен em только для font-size; для width или padding % относится к содержащему блоку, о котором инструмент знать не может.
Как работает Конвертер единиц CSS
Всё переводится через пиксели CSS. Абсолютные единицы используют фиксированные соотношения CSS: 1in = 96px = 2.54cm = 25.4mm = 72pt = 6pc, 1Q = 0.25mm. rem умножается на размер шрифта корня, em — на размер шрифта родителя, % — процент от размера шрифта родителя (трактовка для font-size), vw/vh — 1% ширины/высоты области просмотра, а vmin/vmax используют меньшую/большую сторону. Результаты округляются до 4 знаков после запятой.
Распространенные Случаи Использования
- Перевод размеров дизайн-системы из px в rem
- Проверка, насколько велик 5vw на ноутбуке шириной 1440px
- Перевод печатных размеров в pt или mm в пиксели CSS
- Расчёт значений em для компонента с родительским шрифтом 20px
Часто Задаваемые Вопросы
Почему 1rem равен 16px?
По умолчанию браузеры задают размер шрифта корня 16px. Если в вашем CSS указано html { font-size: 62.5% }, введите 10 в качестве размера шрифта корня.
Чем rem отличается от em?
rem отсчитывается от размера шрифта корня (html), а em — от размера шрифта родительского элемента, поэтому при вложенности значения накапливаются.
Соответствуют ли cm и in физическим размерам на экране?
Нет. В CSS 1in = 96px, поэтому на большинстве экранов сантиметр CSS не равен настоящему сантиметру. В печати они точны.