Онлайн-конвертер CSS-единиц: px, em, rem, pt и %. Меняете любое поле — остальные пересчитываются с учётом root, родителя и базы для процентов. CSS копируется кнопкой.
Конвертер единиц
px · em · rem · pt · % - поля синхронизированы
Значения
Базы
16px = 1em = 1rem = 12pt = 100%
CSS-сниппет
Какую единицу выбрать
px — абсолютные пиксели. Удобны для бордеров 1px, теней и «жёстких» размеров, где масштаб не нужен.
rem — от font-size у html. Предсказуемая шкала для всей дизайн-системы и доступности.
em — от размера шрифта родителя. Хорош для локальных отступов у кнопки или инпута, но накапливается при вложенности.
% — от размера родителя (для ширины) или от заданной базы (для шрифта). Всегда уточняйте, от чего считаете 100%.
pt — типографский пункт. В CSS обычно 1pt = 4/3 px (при 96dpi). Чаще нужен при переносе макетов из печати, чем в UI.
Формулы в калькуляторе
Всё сводится к пикселям, затем обратно в выбранную единицу:
rem = px ÷ root · em = px ÷ parent · % = px ÷ ref × 100 · pt = px × ¾ (и обратно px = pt × 4/3).
По умолчанию root, parent и % reference = 16px. Сдвиньте ползунки, если у вас html { font-size: 62.5% }, нестандартный родитель или проценты от другого контейнера.
rem vs em vs %
rem не зависит от вложенности — удобно для токенов. em масштабируется вместе с локальным кеглем — удобно для padding кнопки. % для шрифта почти всегда путает, если не зафиксирована база; для ширины и отступов от родителя — нормальный выбор.
Для интерфейса чаще всего: rem для типографики и отступов, px для тонких линий, % для гибкой ширины. Em — точечно. Pt оставляйте для редких сценариев печати или импорта из PDF/InDesign.
Как пользоваться
Введите значение в любом поле — остальные пересчитаются.
Настройте root, parent и базу % под ваш проект.
Выберите единицу для сниппета и нажмите «Копировать CSS».
«Сбросить» возвращает 16px / базы 16px / сниппет в rem.
Комментарии
Пока нет комментариев — можете написать первый.