Пиксели макета и доли корневого кегля
CSS rem — длина, кратная font-size корня. Учебный перевод: разделить пиксели макета на выбранный base. Раздел: веб и изображения.
Контроль: 32 px и base 16 → 2 rem. Обратно 24 px из 1,5 rem. Из 32 px и 2 rem корень 16. 16 px при 16 — ровно 1 rem.
Все три числа строго больше нуля. Родитель практика.
rem = px / base
rem = px / base
Три величины. Искомое — rem, px или сам корень. Нуль base или rem при обратном ходе — отказ.
Не em и не сторона кадра
Не подобие прямоугольника картинки. Не счётчик пикселей снимка: 1920 — ширина кадра, не кегль. Не каналы цвета. Не доля от произвольного целого в смысле «32% от 16». Не типографский пункт PostScript: 1 pt ≠ 1 px на экране.
Как пользоваться
Три поля. Узнайте font-size у html (часто 16 px, иногда 10 px при трюке 62,5%). Введите пиксели из макета Figma — получите rem для stylesheet. Если в коде уже rem, восстановите px для сверки с макетом.
Примеры
1. В rem. 32 / 16 → 2.
2. В пиксели. 1,5 × 16 → 24.
3. Корень. 32 / 2 → 16.
4. Единица. 16 / 16 → 1.
5. Запрет. base = 0.
Ещё задачи
Заголовок 40 px при корне 16 → 2,5 rem. Не пишите 40 rem.
Ритм 8 px: 8 / 16 = 0,5 rem. Сетка «восьмёрка» в rem — половины, не целые обязательно.
Корень 18 px (крупнее для чтения): 36 px → 2 rem всё равно, но 32 px → 32/18 ≈ 1,778, не 2.
Трюк html { font-size: 62.5% } при браузерных 16 px даёт base ≈ 10. Тогда 32 px → 3,2 rem. Не делите на 16, если корень уже 10.
Связь с отношением: rem/px = 1/base. Это то же частное, но поля названы как в CSS, не a и b.
Медиазапрос в px, внутри rem: страница не переключает корни на брейкпоинтах. Один base за расчёт.
Не кладите ширину вьюпорта 375 в base, если корень не 375.
Время загрузки шрифта — про файл woff, не про кегль.
Мобильный «минимальный 16 px в input»: это рекомендация браузера против зума, не формула.
Одна единица на странице: не смешивайте px макета iOS @2x с CSS px без оговорки density.
Почему часто 16
Чертёж: линейка корня 16 клетками, отрезок 32 — две таких линейки, подпись 2 rem.
Памятка: деление на корень, не на родителя блока.
Хаб веба ставит rem рядом с кадром, чтобы не склеить типографику и растр фото.
Итог: три положительных поля, em вручную, pt не здесь.
em, pt и масштаб браузера
em считается от font-size родителя. Вложенный span с 0,8 em внутри 1,2 em родителя — уже не px/16. Страница вложенность не хранит: если вам нужен em, посчитайте родителя отдельно и подставьте его как «base» только если сознательно имитируете этот уровень.
Пользователь увеличил шрифт в браузере: фактический корень больше 16. Учебный расчёт с base 16 расходится с тем, что видит посетитель. Это свойство rem, не ошибка формулы.
Родитель практика. Сосед по отношению чисел: a/b.
Итог журнала: rem = px / base, base — корень, не родитель, не пункт.
Контроль: 2 из 32 и 16. 24 из 1,5 и 16. 16 из 32 и 2.
Пример: 12 px подпись при корне 16 → 0,75 rem. Мелочь для дисклеймера, не «12 rem».
Не подставляйте 72 pt как px экрана.
Рабочий пример: rem = 3, px = 48 → base = 16. Либо base = 10 при 30 px и 3 rem.
Связь с процентом: 62,5% от 16 px ≈ 10 px. Процент браузерного кегля считайте на странице процентов, сюда уже готовый base.
Итог для отчёта: пиксели макета, корень документа, частное, без em-цепочки.
Финальный якорь: 32 / 16 = 2. Нуль base запрещён.
Добор: не называйте rem «процентом ширины экрана» — это vw, не эта страница.
Ещё якорь: 20 px и base 20 → 1 rem. Крупный корень «один к одному» с макетом.
Журнал: кнопка 14 px при корне 16 → 0,875 rem. Не округляйте до 1, если сверка с макетом пиксельная.
Не путайте с мегапикселями: миллион точек матрицы не font-size.
Финальный блок: три поля CSS-длины, корень, без вложенных em, без vw, без pt как px.
Ещё контроль: 8 px и 16 → 0,5. 64 px и 16 → 4.
Почему не всегда целые rem? Макет в восьмёрках даёт половины и четверти. Дробь законна.
Итог абзаца: корень задаёте вы, пиксели из макета, частное в stylesheet.
Связь с HEX: цвет текста к кеглю не пересчитывается.
Два корня (десктоп 16, крупный режим 20): два расчёта, не среднее.
Финальный добор: px/base, не em, не кадр, не Мп, не процент вьюпорта.
Отчёт: «2 rem» без 32 и 16 не проверить. Запишите 32 / 16.
Стык с кадром: 1920 — не base.
Не кладите 1080 в px как «кегль страницы».
Якорь: 2; 24; 16; 1 rem из 16 px. Нуль base нельзя.
Приложение: line-height 24 px при шрифте 16 px — это 1,5, но line-height безразмерный множитель или длина. Если переводите именно длину 24 px → 1,5 rem при корне 16. Не путайте с «1,5» без единицы.
Safari и Chrome могут чуть иначе округлять субпиксель. Учебный ответ точный; рендер — движок.
Повторный расчёт после смены html font-size: обновите base, не оставляйте старые rem как будто корень тот же.
Типичные ошибки
- Делить на 16, когда корень 10.
- Путать rem с em родителя.
- Класть ширину картинки в px как кегль.
- Ждать vw и медиазапросы.
- Нулевой base.
Соседи: кадр, отношение, проценты, мегапиксели, HEX.
Макет @2x: 64 физических пикселя телефона при CSS 32 px — в поля кладите CSS px, не плотность.
Итог добора: частное пикселей макета и корневого кегля, без em-цепочки, без пунктов печати, без сторон фото.
Частые вопросы
- Как перевести 32 px в rem?
- rem = px / base. При корне 16 получается 2 rem.
- Откуда 16?
- Частый корневой кегль html. Поле base можно сменить: 18, 10, 62,5% как 10 px — если так настроен документ.
- Это em от родителя?
- Нет. rem всегда от корня. Вложенность блоков страница не знает.
- Это пропорции картинки?
- Масштаб кадра считает стороны растра, не типографику.
- Нулевой корень?
- Ошибка. Делить пиксели не на что.
- Где хаб?
- Веб и изображения.
Источники
- Учебные определения: пропорции кадра, CSS rem от корневого кегля, t = размер/скорость, sRGB-каналы 0…255, мегапиксель = w·h/10⁶, дюйм печати = пиксели/DPI, объём = скорость×время.