Переводите px в rem, em, pt, пики, дюймы и mm с учётом размера шрифта корневого и родительского элементов и DPI. В CSS задано 1 in = 96 px = 72 pt.
Автор: AdminЧерновик подготовлен инструментами ИИ для написания текстовОбновлено Проверенные примеры: 7
При корневом шрифте 16 px и плотности 96 пикселей на дюйм значение 24px равно 1.5rem.
| Единица | Значение | Определение |
|---|---|---|
| Пиксели (px) | 24px | 1 px |
| Пункты (pt) | 18pt | 1 pt = 1/72 in |
| Пики (pc) | 1.5pc | 1 pc = 12 pt = 1/6 in |
| Дюймы (in) | 0.25in | 1 in = DPI px |
| Сантиметры (cm) | 0.635cm | 1 cm = 1/2.54 in |
| Миллиметры (mm) | 6.35mm | 1 mm = 1/25.4 in |
| Четверти миллиметра (Q) | 25.4Q | 1 Q = 0.25 mm |
| em (размер шрифта родительского элемента) | 1.5em | 1 em = parent font size |
| rem (размер шрифта корневого элемента) | 1.5rem | 1 rem = root font size |
| Процент от размера шрифта родителя (%) | 150% | 100% = parent font size |
1 px
1 rem = root font size
CSS переводит любую длину через пиксели. Отношения абсолютных единиц фиксированы: 1 in = 2.54 cm = 96 px = 72 pt = 6 pc; 1 Q — четверть миллиметра. Шрифтовые единицы зависят от страницы: 1 rem — размер шрифта корневого элемента, а в свойстве font-size величина 1 em (или 100%) равна размеру шрифта родителя. Значение переводится в пиксели, затем делится на число пикселей в целевой единице.
Веб-разработчики переводят размеры макета из пикселей в rem, чтобы текст учитывал настройку шрифта читателя: при корневом размере 16 px величина 24 px равна 1.5 rem. Для печати используют поле пикселей на дюйм: при 300 DPI логотипу шириной 10 mm нужно около 118 пикселей. Чтобы текст учитывал настройку браузера, корневой размер шрифта должен её сохранять.
Дюйм CSS не обязательно равен измеренному экранному дюйму. CSS задаёт 96 px на дюйм; эталонный пиксель имеет угол зрения около 0.0213°. Реализация может опираться на физические меры или пиксели; отображение устройства, расстояние просмотра и масштаб печати влияют на реальный размер.
В формуле xₛ и xₜ — исходное и целевое значения, pₛ и pₜ — число пикселей в исходной и целевой единицах. Коэффициенты учитывают заданные размеры шрифта и плотность пикселей.
rem зависит от размера шрифта корневого элемента. В примере ниже этот размер указан явно. Для em и процентов форма использует введённый родительский размер шрифта; в настоящем CSS основание зависит ещё и от свойства.
rem = px ÷ root(px)
24 px ÷ 16 px = 1.5 rem
Для font-size единица em связана с родителем, для других свойств со шрифтом самого элемента. Проценты других свойств могут относиться, например, к ширине. Иное pixels/in здесь предназначено для изображения или печати и не меняет фиксированное определение абсолютных CSS-единиц.
| Значение | Исходная единица | Целевая единица | Контекст | Результат перевода |
|---|---|---|---|---|
| 24 | px | rem | Корневой шрифт 16 px | 1.5 |
| 24 | px | rem | Корневой шрифт 20 px | 1.2 |
| 12 | pt | px | 96 пикселей/in | 16 |
| 1 | pc | pt | 96 пикселей/in | 12 |
| 100 | % | em | Родительский шрифт 16 px | 1 |
| 10 | mm | px | 300 пикселей/in | 118.110236 |
CSS px не гарантированно равен одному физическому пикселю экрана. Контекст таблицы является частью каждого расчёта. Миллиметровая строка округлена; для веба берите реальный шрифтовой контекст, для печати нужное разрешение.
Основание: W3C CSS Values and Units.
Источник проверки: Проверка примера: CSS Values 3 §6.1: 1rem = размер шрифта корневого элемента (16 px принятое здесь значение браузера по умолчанию); 24 / 16 = 1.5
Источник проверки: Проверка примера: CSS Values 3 §6.2: 1pt = 1/72 in, 1in = 96px; 12 × 96/72 = 16
Источник проверки: Проверка примера: CSS Values 3 §6.2: 1in = 96px
Источник проверки: Проверка примера: 1 rem = размер шрифта корневого элемента (16 px); 1.5 × 16
Обычно по умолчанию это 16 пикселей. Один rem равен размеру шрифта корневого элемента html. Основные браузеры используют 16 px, если читатель не изменил настройку или таблица стилей не задала html { font-size }. При этой исходной настройке html { font-size: 62.5% } даёт 1 rem = 10 px. W3C CSS Values and Units определяет rem; 16 px — настройка браузера, а не требование спецификации.
Умножьте пиксели на 0.75; для перевода пунктов в пиксели умножьте на 4/3 (около 1.333). Оба коэффициента следуют из правила W3C CSS: 1 in = 96 px = 72 pt, поэтому 1 px = 72/96 pt. Текст 16 px равен 12 pt, а текст 11 pt из текстового редактора — примерно 14.67 px.
rem всегда относится к шрифту корневого элемента, em — текущего элемента, а в свойстве font-size — родительского. При вложении em перемножается: список 1.2em внутри другого списка 1.2em даёт размер в 1.44 раза больше внешнего исходного. При корневом шрифте 16 px величина 1.2rem остаётся 19.2 px на любой глубине.
Используйте rem, если текст должен учитывать настройку размера шрифта читателя. Масштаб страницы увеличивает и px, и rem, но настройка шрифта по умолчанию влияет на rem, em и проценты. Критерий WCAG 2.1 1.4.4 (уровень AA) требует увеличения текста до 200% без потери содержимого или функций. Масштаб браузера позволяет выполнить это и с px; rem дополнительно учитывает предпочтение размера шрифта. Действие rem, em и процентов зависит от корневого или родительского контекста; корневой размер должен учитывать выбор читателя.
Дюйм CSS может отличаться от измеренного экранного. CSS точно задаёт 1 in как 96 px; эталонный пиксель W3C — пиксель экрана 96 DPI с расстояния 28 in, угол около 0.0213°. Отображение устройства и расстояние различаются, поэтому блок 96 px на телефоне может быть меньше физического дюйма. При печати в реальном размере 1 in = 25.4 mm может совпасть с линейкой; масштаб печати и калибровка также влияют.
В калькулятор включены решённые примеры с ответами из независимых источников. Их количество: 7. Они входят в набор тестов, и вы также можете запустить их здесь.