Относительные или абсолютные величины лучше использовать при верстке

Относительные или абсолютные величины в верстке: выбор для современного Frontend Developer

Выбор между относительными и абсолютными величинами — это фундаментальный вопрос в верстке, и правильный ответ обычно звучит: использовать комбинацию обоих подходов, но с приоритетом относительных единиц в большинстве случаев. Давайте разберем детально, почему это так и когда что применять.

Преимущества и сценарии использования относительных величин

Относительные единицы (em, rem, %, vw/vh, ch) адаптируются к контексту, что делает их незаменимыми для:

1. Создания адаптивных и доступных интерфейсов

• rem (root em) — основа современной типографики и spacing, так как зависит от корневого размера шрифта (html). Это позволяет легко масштабировать весь интерфейс через один параметр, а также уважать пользовательские настройки браузера.

  html {
    font-size: 16px; /* Базовый размер, но лучше использовать 100% или 62.5% для удобства */
  }
  .title {
    font-size: 2rem; /* Всегда 32px при root = 16px */
  }
  .padding {
    padding: 1.5rem; /* Отступы также масштабируются пропорционально */
  }
  

• % — ключевая единица для построения гибких сеток, особенно в сочетании с Flexbox или Grid. Контейнеры, колонки и изображения могут занимать долю от родительского элемента.
• vw/vh (viewport width/height) — идеально для элементов, которые должны зависеть от размера экрана (например, полноэкранные секции, модальные окна).

2. Обеспечения доступности (a11y)

Пользователи могут увеличивать базовый размер шрифта в браузере. Если использовать rem для шрифтов и отступов, интерфейс корректно масштабируется, сохраняя читаемость. Абсолютные единицы вроде px могут игнорировать эти настройки, ломая UX.

3. Упрощения поддержки и темизации

Изменение масштаба интерфейса (например, для темы с увеличенным текстом) требует правки всего нескольких CSS-переменных, если все размеры заданы относительно.

Когда абсолютные величины (px, pt, cm) все же нужны

Абсолютные единицы, особенно пиксели (px), имеют свое место в верстке:

• Тонкие границы и тени: border: 1px solid #ccc — логично, так как относительные единицы здесь могут создавать "дробные" пиксели и размытость.
• Фиксированные размеры для пиксель-перфект дизайна: Например, иконки из Figma часто экспортируются с точными пиксельными размерами, и их изменение может ухудшить резкость.
• Запрет на масштабирование: Редкие случаи, когда элемент должен оставаться неизменным при любом zoom (например, часть сложного графика).
• Медиа-запросы: В большинстве проектах до сих пор используют пиксели в @media (min-width: 768px), хотя постепенно переходят на em для лучшей доступности.

Практические рекомендации по комбинированию

Вот мой типичный подход, выработанный за годы:

1. Базовая единица — rem для:

   • Размеров шрифтов (font-size).
   • Вертикальных и горизонтальных отступов (padding, margin).
   • Размеров, связанных с общей масштабируемостью.

2. Проценты и fr для:

   • Сеток (grid-template-columns: 1fr 2fr).
   • Ширин/высот в контексте родителя (width: 50%).

3. Viewport units для:

   • Высоты hero-секций (min-height: 100vh).
   • Размеров, привязанных именно к окну браузера.

4. Пиксели для:

   • Мельчайших декоративных элементов (border-width, box-shadow).
   • Изображений и иконок, когда важна точность.

Пример современного подхода с CSS-переменными

:root {
  --base-font-size: 16px;
  --spacing-unit: 1rem; /* Базовый отступ */
  --container-padding: 1.5rem;
  --border-thin: 1px;
}

@media (min-width: 64em) { /* Медиа-запросы на em для учета zoom */
  :root {
    --container-padding: 2rem;
  }
}

.container {
  padding: var(--container-padding); /* Относительно */
  border-bottom: var(--border-thin) solid #000; /* Абсолютно */
}

Итог

Приоритет относительных величин — это стандарт в современной фронтенд-разработке. Он обеспечивает:

• Адаптивность под любые устройства.
• Уважение к пользовательским настройкам доступности.
• Более гибкий и поддерживаемый код.

Абсолютные величины используются точечно, там, где требуется точность или фиксированное значение. Ключ — понимание контекста и целей каждого свойства CSS, а не слепое следование одному правилу. В результате получается интерфейс, который выглядит идеально и работает для всех пользователей.