Единицы измерения CSS в 2026 году

CSS Length Units | CSS-Tricks

A comprehensive guide covering nine types of lengths that CSS uses to size elements in terms of dimensions, space, time, and even sound.

CSS-TricksGeoff Graham

Единицы измерения в CSS: от пикселей до vw

1. Единицы измерения в CSS?

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

2. Классификация единиц

2.1. Абсолютные единицы

Важно: В веб‑дизайне абсолютные единицы редко применяются, так как они не учитывают плотность пикселей (DPI), масштаб браузера и пользовательские настройки. Поэтому чаще всего используют относительные и гибридные единицы.

2.2. Относительные единицы

Ключевой момент: Относительные единицы делают стили более гибкими. em и rem особенно популярны для масштабируемых интерфейсов и доступности (accessibility).

2.3. Гибридные и специальные единицы

• fr – фракция, используется в CSS‑Grid для распределения свободного пространства.
• calc() – функция, позволяющая комбинировать различные единицы (calc(100% - 80px)).
• min(), max() – функции, которые принимают набор выражений и возвращают минимум/максимум.
• clamp() – задаёт диапазон значений (clamp(1rem, 2vw, 3rem)).

3. Практические примеры использования

3.1. Адаптивные шрифты с rem и clamp()

html {
  font-size: 16px; /* Базовый размер */
}

body {
  font-size: clamp(0.9rem, 2.5vw, 1.1rem);
}

• Проблема: При маленьком экране font-size становится слишком мал.
• Решение: clamp() позволяет задать минимум и максимум, а внутри использовать vw, чтобы шрифт масштабировался плавно.

3.2. Полноэкранный контейнер с vh и vw

.fullscreen {
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

• Проблема: При скроллинге иногда возникает «черная полоса» из-за учёта прокрутки.
• Решение: Использовать 100dvh вместо 100vh в новых браузерах.

3.3. Сетка с фракциями fr

.grid {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
}

• Пояснение: fr распределяет свободное пространство пропорционально. Здесь второй столбец будет в два раза шире первых.

3.4. Динамический отступ с calc()

.card {
  width: calc(50% - 20px);
  margin: 10px;
}

• Проблема: Хочется, чтобы карточка занимала половину ширины, но с учётом отступа.
• Решение: calc() делает вычисление «половины минус 20px».

4. Советы по работе с единицами

5. Как использовать гибридные единицы для улучшения доступности

5.1. em и rem vs pt

В доступном дизайне важно, чтобы пользователь мог увеличить размер шрифта без потери читаемости. При использовании pt (точек) такой гибкости нет, потому что это абсолютная величина. rem позволяет задавать размер относительно корневого элемента, а пользователь может изменить font-size на уровне html, и все дочерние элементы автоматически масштабируются.

5.2. Функция clamp() для контрастности

p {
  font-size: clamp(0.875rem, 2vw, 1.125rem);
}

• Плюс: При сжатом экране шрифт уменьшится, но не станет меньше 0.875rem.
• Минус: На больших экранах не станет слишком большим.

6. Частые ошибки и как их избежать

7. Заключение

Единицы измерения в CSS – это не просто «чеклы», а мощный инструмент для создания адаптивных и доступных веб‑страниц. Понимание разницы между абсолютными и относительными единицами, умение комбинировать их с помощью calc(), min(), max(), clamp() и fr позволяет создавать интерфейсы, которые выглядят одинаково хорошо на любом устройстве и в любых условиях.

Если вы хотите сделать ваш сайт гибким и дружелюбным к пользователям, начните с выбора подходящей системы измерений и придерживайтесь её. Не бойтесь экспериментировать с clamp() и calc() – они откроют для вас новые горизонты гибкого дизайна.

Подсказка: Если вы разрабатываете сайт с нуля, задайте базовый font-size: 16px в html, а дальше используйте rem и clamp() для всех размеров. Это упростит поддержку и улучшит доступность.