Когда новичок впервые открывает CSS, он видит десятки странных обозначений: px, em, rem, pt, vw... Глаза разбегаются. А опытные верстальщики спорят до хрипоты: «Пиксели — зло!» или «Наоборот, em — это боль!».
Давайте раз и навсегда разберемся, какие единицы измерения существуют в веб-верстке, что из этого реально используют топовые разработчики, а что осталось в прошлом веке.
Две главных группы: Относительные и Абсолютные
Все единицы в HTML/CSS делятся на два лагеря.
Абсолютные — это как линейка. Они не зависят ни от чего. Поставил 2 см — будет 2 см (ну, почти). Сюда входят px, pt, in, mm, cm.
Относительные — это «хамелеоны». Они пляшут от размера шрифта родителя, экрана или настроек браузера. Сюда входят em, rem, ex, vh, vw, %.
Абсолютные единицы: Призраки прошлого
Вы удивитесь, но типографские пункты (pt) и сантиметры (cm) в вебе работают... очень плохо.
px (пиксель) — Король современного веба
Технически px — это не совсем точка экрана. Это аппаратно-независимый пиксель. Браузер сам решает, как его отрисовать на современных экранах.
- Где применять: Везде. Границы (border), тени (box-shadow), мелкие отступы. Для всего, что должно быть чётко и не плавать.
- Правило: Для фиксированной ширины и тонких декоративных элементов — только px.
pt (пункт), in (дюйм), cm/mm
Это единицы для печати. 1pt = 1/72 дюйма.
- Проблема: Мониторы не умеют преобразовывать размер в «честные дюймы». Система просто берёт условное значение (обычно 96ppi) и пересчитывает его. Плюс пользователь сидит в 50 см от монитора, а может в 30 или в 70,, и это будет иметь значение.
- Где применять: ТОЛЬКО в CSS для печатных стилей (@media print). Если вы верстаете PDF-счет или этикетку — берите pt или cm. В обычном сайте — никогда. Текст в pt будет либо гигантским, либо микроскопическим на разных экранах.
Относительные единицы: Инструмент профессионала
Здесь начинается магия адаптивной вёрстки.
em — Относительно родителя
1em равен текущему размеру шрифта родительского элемента. Если у родителя шрифт 16px, то 1em = 16px. Если вы у вложенного блока напишете padding: 2em, то отступ будет в 2 раза больше шрифта этого блока.
Минус: Эффект матрёшки. Если вложить div в div и везде ставить font-size: 0.8em, текст будет сжиматься до атомов.
rem (root em) — Золотой стандарт
В отличие от em, rem всегда смотрит на размер шрифта корневого элемента (<html>). По умолчанию в браузере 1rem = 16px.
Почему все перешли на rem?
Вы меняете шрифт у <html> один раз, и пропорционально масштабируется весь сайт: кнопки, отступы, тексты. Это лучшая доступность (Accessibility). Пользователь изменил масштаб шрифта в настройках — ваш сайт красиво перестроится, а если бы вы использовали px — текст бы просто обрезался.
Совет эксперта: rem для шрифтов, отступов и размеров блоков. px для границ и мелких деталей.
ex и ch — Специфические
- ex — высота строчной буквы 'x' в текущем шрифте.
- ch — ширина символа '0'.
Используются редко, в основном для подгонки полей подвода текста. Но ch отлично подходит для задания максимальной ширины абзаца (чтобы в строке было не более 70 символов).
% (проценты)
Работают в контексте родительского блока.
- width: 50% — половина ширины папы.
- line-height: 150% — полтора межстрочника.
Живут своей жизнью, но без них никак при создании «резиновых» сеток.
vw и vh — Вьюпорт
- 1vw = 1% от ширины окна браузера.
- 1vh = 1% от высоты окна браузера.
Хитрость: 100vh — это идеальный блок на весь экран. Сейчас на мобилках есть косяки с адресными строками, но проблема решается новыми svh, lvh, dvh.
Что применяется прямо сейчас? Итоговая таблица лучших практик
Что и в каких случаях применять лучше?
Ситуация А: Вы делаете сложный адаптивный сайт для клиента.
Берите rem. Задайте базовый размер 62.5% (тогда 1rem = 10px — удобно считать). Всю геометрию и шрифты крутите через rem. Границы делайте px.
Ситуация Б: Вы верстаете письмо для Email-рассылки.
Только px. Почтовые клиенты (Outlook, Mail.ru) не понимают rem, vh или ch. Там железобетонная вёрстка 2007 года.
Ситуация В: Вы делаете огромный портал с новостями и хотите, чтобы люди со слабым зрением увеличили шрифт через настройки браузера.
rem для текста. При масштабировании через настройки (Ctrl+ / Cmd+), содержимое останется внутри макета, а не развалит колонки.
Ситуация Г: Вам нужно поставить иконку ровно 24x24 пикселя.
px. И только px. Никаких rem для иконок в фиксированной сетке.
Главный вывод
Забудьте про cm, mm и pt в обычной верстке. Они для принтеров.
Золотая формула современного фронтендера:
Размеры блоков и шрифтов — в rem, тонкие границы — в px, ширина сетки — в %, полноэкранные блоки — в vh
Освоите эту аксиому — ваши сайты будут нравиться и поисковикам (за адаптивность), и бабушкам (за возможность увеличить шрифт).
Подписывайтесь на канал, чтобы не пропустить разборы верстки для новичков и профессионалов. В следующей статье разберем, как подружить clamp() и vw для идеальной типографики без медиа-запросов.