Какие единицы измерения использовать — один из самых частых вопросов у верстальщиков. Все эти единицы делятся на абсолютные (по факту, только px) и относительные (все остальные).
Главное правило выбора звучит так: используйте px для границ и мелких деталей, em/rem — для текста и отступов, % — для ширин сетки, vw/vh — для полноэкранных блоков.
Вот подробный разбор, когда и что применять:
1. px (Пиксели) — фиксированная единица
Что это:
Фиксированный размер, привязанный к физическим пикселям экрана.
Когда использовать:
- Границы (border): Толщина рамки в 1px всегда должна оставаться 1px.
- Тени (box-shadow): Радиус размытия.
- Мелкие отступы: Если вам нужно сдвинуть элемент на 2–3 пикселя для точной подгонки (например, иконку внутри кнопки).
- Медиа-запросы (max-width): Хотя их тоже часто делают на em, px в брейкпоинтах до сих пор стандарт, так как они точно ломаются на нужных ширинах экранов.
Когда не использовать:
- Для размеров шрифтов и основных отступов (если вы не делаете одностраничник без зума).
2. rem (Root EM) — глобальный масштаб
Что это:
Размер относительно шрифта корневого элемента <html>. По умолчанию браузерный шрифт = 16px. То есть 1rem = 16px.
Когда использовать:
- Размеры шрифтов для всего контента.
- Отступы (margin/padding) у блоков и секций.
- Ширина и высота крупных элементов.
Почему:
Если пользователь зайдет в настройки браузера и увеличит базовый шрифт (например, людям со слабым зрением), то сайт масштабируется пропорционально, сохраняя читаемость.
Лайфхак:
Многие разработчики пишут код:
html { font-size: 62.5%; }что равно 10px (62.5% от 16 пикселей как раз и дадут 10px). Математика: 1rem = 10px, 2rem = 20px и тд.
3. em — локальный масштаб (Относительно родителя)
Что это:
Размер относительно текущего элемента (наследуется от родительского шрифта).
Когда использовать:
- Медиа-запросы (лучшая практика — использовать em в @media, чтобы при зуме текста мобильная версия включалась раньше).
- Внутренние отступы у кнопок и карточек: Чтобы паддинг масштабировался вместе с размером шрифта самой кнопки.
- Мультипликативные свойства: Например, text-indent: 2em (отступ красной строки всегда равен двум размерам текущего шрифта).
Осторожно (Каскад):
Если у вложенного элемента задан font-size: 1.5em, а у родителя font-size: 1.5em, размер будет расти как снежный ком (1.5 * 1.5 = 2.25). Для шрифтов лучше почти всегда использовать rem, чтобы избежать этого.
4. % (Проценты) — относительно родительского контейнера
Что это:
Зависит от свойства. Для ширины — это процент от ширины родителя. Для font-size — процент от родительского шрифта.
Когда использовать:
- «Резиновая» верстка: ширина колонок (width: 33.333%).
- Адаптивные изображения: img { max-width: 100%; } (картинка никогда не вылезет за пределы родителя).
- Position (top/left): Когда нужно точно позиционировать элемент относительно размеров родительского блока.
- Transform: В свойствах translate(-50%, -50%) для центрирования (процент считается от размера самого элемента).
5. vw (Viewport Width) и vh (Viewport Height)
Что это:
1vw = 1% от ширины экрана браузера. 1vh = 1% от высоты экрана браузера.
Когда использовать:
- Экранные заставки: height: 100vh; — блок всегда на весь экран, независимо от контента.
- Шрифты, которые должны тянуться за экраном.
- Модальные окна: Ограничение высоты выпадающего списка (max-height: 80vh), чтобы он не уходил за край монитора.
Главная проблема (Баги мобильных браузеров):
На iPhone в Safari 100vh включает адресную панель и панель навигации. То есть блок может перекрыть часть контента, так как реальная видимая высота меньше. Для полноэкранных блоков на мобилках лучше использовать dvh (динамическая высота) или JavaScript.
Итог
| Свойство | Единица | Почему |
|---|---|---|
| font-size (текст) | rem | Избегаем каскадного умножения |
| padding / margin (отступы у блоков) | rem | Отступы масштабируются с текстом (или сеткой) |
| padding / margin (у кнопки) | em | Если размер шрифта кнопки изменится, отступы внутри автоматически станут красивыми |
| border / outline | px | Рамка должна быть четкой и не «плавать» |
| border-radius | px или % | Для скругления углов. % используйте, если нужен круг (50%) |
| width (ширина колонок) | % | Чтобы сетка сжималась при изменении ширины родителя |
| max-width (контейнера) | px или rem | px (например, 1200px) — жесткое ограничение. rem — масштабируемое |
| height (у секции) | vh / dvh | Чтобы сделать блок на весь экран |
| медиа-запросы (@media) | em | Это лучшая практика для доступности (при зуме текста верстка ломается вовремя) |