Конвертер единиц CSS
Перевод px, rem, em, pt и остальных единиц вёрстки.
Заполните поля — результат появится здесь автоматически.
Сопоставляет CSS-длины через CSS-пиксель при явно заданных базах rem и em. Фиксированные соотношения: 1in=96px, 1pt=96/72px, 1pc=16px. rem использует вычисленный размер шрифта корня. Для обычных свойств em использует вычисленный шрифт самого элемента, а в свойстве font-size — унаследованный размер. Поле «База em» позволяет задать нужный контекст без предположения о вложенности.
Как считается
Формула и логика
Для каждой единицы задаётся коэффициент f в CSS-пикселях. Итог = значение·fисх/fцел. Для rem коэффициент равен корневому размеру, для em — выбранной базе em; 1cm=96/2,54px и 1mm=96/25,4px. Обе базы должны быть положительными: они нужны также для справочных строк. Ноль и отрицательное значение длины допускаются арифметикой, но конкретное CSS-свойство может их запрещать.
Пример
При корневом размере 16 px значение 24 px — это 1,5 rem и 18 pt.
Поля и единицы
- Значение — px
- Из единицы — вариант из списка
- В единицу — вариант из списка
- Корневой размер шрифта — px
- База em — px
Как пользоваться
- — Выберите исходную и целевую единицы и введите длину.
- — Задайте вычисленный корневой шрифт и базу em в CSS-пикселях.
- — Читайте целевую единицу в подписи результата; справочные строки используют те же базы.
Методика и ограничения
- Методика расчёта
- Формула и логика
- Источник данных или нормы
- W3C CSS Values 3: базы em/rem и абсолютные единицы (проект)
- Ограничение
- Перевод CSS-длин с заданным контекстом; не измеряет физическую плотность экрана и не проверяет допустимость длины для конкретного свойства.
FAQ
Чем отличаются базы rem и em?
rem использует вычисленный шрифт корня. Для margin или width единица em относится к шрифту самого элемента; при задании font-size — к унаследованному размеру. Введите именно ту базу, которая действует в нужном свойстве.
CSS-сантиметр совпадает с физическим?
Соотношение cm и px фиксировано: 1cm=96/2,54px. Физический размер зависит от того, как устройство привязывает абсолютные единицы; на экране он не гарантирован линейкой.
px отключает масштабирование браузера?
Нет. Масштабирование страницы работает и с px. rem может следовать пользовательскому корневому шрифту; доступность нужно проверять на реальном макете, а не выводить из одной единицы.
Всегда ли 62,5% означает корень 10px?
Только если исходная величина равна 16px: 0,625·16=10. При пользовательском исходном шрифте 20px получится 12,5px. Здесь вводится фактически вычисленный размер.