Единицы измерения
в веб-верстке HTML CSS JS
в веб-верстке HTML CSS JS
автор: Павел Станкевич
дата публикации: 4 августа 2025 г.
последнее обновление: 4 августа 2025 г.
Здравствуйте, Люди!
В этой публикации мы поговорим о том, какие есть единицы измерения в HTML и CSS и какие когда выбирать.
В этой публикации мы поговорим о том, какие есть единицы измерения в HTML и CSS и какие когда выбирать.
Пиксели - px
Пиксель (px) — базовая единица. Абсолютная
Запомните: 1px = один пиксель на экране. Все остальные единицы (em, rem, %) браузер в итоге конвертирует в px.
Ключевые особенности:
Запомните: 1px = один пиксель на экране. Все остальные единицы (em, rem, %) браузер в итоге конвертирует в px.
Ключевые особенности:
- Дробные пиксели — норма: Смело пишите 16.5px. Браузеры используют их в расчетах (например, 100px / 3 = 33.333px). При отрисовке дробные значения округляются до целых пикселей.
- Мобильное масштабирование: На телефонах с плотными пикселями браузер автоматически масштабирует контент. Один CSS-пиксель (px) может занимать несколько физических точек экрана для читаемости.
➕Плюсы:
- Четкость и предсказуемость: 20px — это всегда 20px. Никакой зависимости от родителя или шрифта.
- Простота: Самая интуитивная единица.
➖ Минусы:
- Недостаток гибкости: Относительные единицы (em, rem, %, vw/vh) мощнее. Они создают динамические интерфейсы, где размеры соотносятся друг с другом или окном браузера. px — статичен.
- Сложность адаптива: Сделать идеально масштабируемый макет только на пикселях — труднее.
Пояснение
CSS-пиксель (px) — абсолютен в мире браузера, но не в мире железа!
1) Абсолютность в CSS: когда вы пишете width: 300px; — это жёсткая команда браузеру: «Занимай ровно 300 единиц моего виртуального пространства!».
Все другие единицы (em, rem, %, vw) конвертируются в эти виртуальные px. Это ваш контроль над макетом.
2) Масштабирование — это адаптация к «реальному миру»:
Ваш телефон физически имеет 1080x2340 пикселей? Но его экран диагональю всего 6.1 дюйма!
Если бы браузер отображал 1 CSS-px = 1 физическому пикселю — текст был бы микроскопическим!
Решение: Браузер автоматически масштабирует виртуальные px под плотность экрана (коэффициент devicePixelRatio). Например:
1) Абсолютность в CSS: когда вы пишете width: 300px; — это жёсткая команда браузеру: «Занимай ровно 300 единиц моего виртуального пространства!».
Все другие единицы (em, rem, %, vw) конвертируются в эти виртуальные px. Это ваш контроль над макетом.
2) Масштабирование — это адаптация к «реальному миру»:
Ваш телефон физически имеет 1080x2340 пикселей? Но его экран диагональю всего 6.1 дюйма!
Если бы браузер отображал 1 CSS-px = 1 физическому пикселю — текст был бы микроскопическим!
Решение: Браузер автоматически масштабирует виртуальные px под плотность экрана (коэффициент devicePixelRatio). Например:
- 1 CSS-px = 2 физических пикселя на Retina-экране.
- 1 CSS-px = 3 физических пикселя на сверхплотном дисплее.
Что такое размер шрифта?
Неверно: Это высота самой большой буквы.
Верно: Это условная единица (метрика), встроенная в файл шрифта.
Эта метрика задает воображаемую высоту, которая обычно больше, чем расстояние от верха «Б» до низа «у».
Буквы с выносными элементами (р, g, у) выходят за пределы этой высоты (вниз или вверх).
Поэтому высоту строки (line-height) всегда задают больше, чем размер шрифта (font-size). Иначе выносные элементы соседних строк будут пересекаться.
Неверно: Это высота самой большой буквы.
Верно: Это условная единица (метрика), встроенная в файл шрифта.
Эта метрика задает воображаемую высоту, которая обычно больше, чем расстояние от верха «Б» до низа «у».
Буквы с выносными элементами (р, g, у) выходят за пределы этой высоты (вниз или вверх).
Поэтому высоту строки (line-height) всегда задают больше, чем размер шрифта (font-size). Иначе выносные элементы соседних строк будут пересекаться.
Относительная единица — em
1em — относительная величина размера элемента в CSS.
Размеры в em — относительны заданному размеру родителя, они определяются по текущему контексту.
Можно брать любые пропорции от текущего шрифта: 3em, 0.5em и так далее.
Пример:
Размеры в em — относительны заданному размеру родителя, они определяются по текущему контексту.
Можно брать любые пропорции от текущего шрифта: 3em, 0.5em и так далее.
Пример:
<div class="level_one" style="font-size:25px">
Размер шрифта контента в блоке с классом level_one — 25 пикселя
<div class="level_two" style="font-size:25px">Размер шрифта контента в блоке с классом level_two — 25 пикселя</div>
</div>Результат:
Размер шрифта контента в блоке с классом level_one — 24 пиксей
Размер шрифта контента в блоке с классом level_two — 24 пиксей
Размер шрифта контента в блоке с классом level_one — 24 пиксей
Размер шрифта контента в блоке с классом level_two — 24 пиксей
Мы видим, что размер текста остаётся 24 пикселя, но что будет если мы заменим px на em, давайте посмотрим:
<div class="level_one" style="font-size:28px">
Размер шрифта контента в блоке с классом level_one — 28 пикселя
<div class="level_two" style="font-size:0,5em">Размер шрифта контента в блоке с классом level_two — 14 пиксей (0,5em — половина от 28 пикселей)</div>
</div>Результат:
Размер шрифта контента в блоке с классом level_one — 28 пиксей
Размер шрифта контента в блоке с классом level_two — 14 пиксей (0,5em т.е. половина от 28 пикселей)
Размер шрифта контента в блоке с классом level_one — 28 пиксей
Размер шрифта контента в блоке с классом level_two — 14 пиксей (0,5em т.е. половина от 28 пикселей)
На примере мы видим как наследуется
На примере мы видим как значение в em высчитывается относительно текущего размера шрифта элемента родителя: текст во вложенном div в 2 раза меньше шрифта в блоке родителе.
Размеры в em будут уменьшаться или увеличиваться вместе со шрифтом! А так как размер шрифта обычно задаётся у родителя – меняешь его в одном месте, и всё автоматически обновляется. Это удобно.
На примере мы видим как значение в em высчитывается относительно текущего размера шрифта элемента родителя: текст во вложенном div в 2 раза меньше шрифта в блоке родителе.
Размеры в em будут уменьшаться или увеличиваться вместе со шрифтом! А так как размер шрифта обычно задаётся у родителя – меняешь его в одном месте, и всё автоматически обновляется. Это удобно.
Проценты %
Как и em, проценты % — относительные единицы измерения.
Ключевой вопрос: Процент от чего?
Чаще всего: % берётся от значения того же свойства у родительского элемента (например, width: 50% = половина ширины родителя).
Но не всегда: База для расчёта зависит от конкретного свойства CSS. Например:
Ключевой вопрос: Процент от чего?
Чаще всего: % берётся от значения того же свойства у родительского элемента (например, width: 50% = половина ширины родителя).
Но не всегда: База для расчёта зависит от конкретного свойства CSS. Например:
- line-height: 150% — процент от текущего font-size элемента (а не родителя!).
- width / height: обычно берется ширина или высота родителя, но если у элемента установлено свойство position:fixed; то ширина и высота будут считаться от
- margin-left: процент берётся от ширины родительского блока, а не от его margin-left.
<div class="level_one" style="font-size: 28px">
Размер шрифта контента в блоке с классом level_one — 28 пикселя
<div class="level_two" style="font-size: 50%">Размер шрифта контента в блоке с классом level_two — 14 пиксей (50% — половина от 28 пикселей)</div>
</div>Результат:
Размер шрифта контента в блоке с классом level_one — 28 пиксей
Размер шрифта контента в блоке с классом level_two — 14 пиксей (50% т.е. половина от 28 пикселей)
Размер шрифта контента в блоке с классом level_one — 28 пиксей
Размер шрифта контента в блоке с классом level_two — 14 пиксей (50% т.е. половина от 28 пикселей)
Относительная единица — rem
REM: Корневая единица измерения
История:
С 2013 года в CSS доступна единица rem (от "root em" — "корневой em").
Определение:
1 rem = размер шрифта (font-size) корневого элемента документа (<html>).
Ключевое отличие от em:
Преимущества:
История:
С 2013 года в CSS доступна единица rem (от "root em" — "корневой em").
Определение:
1 rem = размер шрифта (font-size) корневого элемента документа (<html>).
Ключевое отличие от em:
em | rem | |
База | Размер шрифта текущего элемента или родителя | Всегда размер шрифта <html> |
Контекст | Зависит от каскада | Не зависит от иерархии элементов |
Преимущества:
- Глобальная согласованность: Все элементы используют единую базовую величину.
- Защита от компаундирования: Размеры не умножаются на значения font-size родителей (в отличие от em).
- Упрощение адаптивности: Изменение размера шрифта в html масштабирует весь интерфейс.
Правило применения:
Используйте rem для размеров, которые должны масштабироваться относительно базового шрифта документа, а не локального контекста.
Используйте rem для размеров, которые должны масштабироваться относительно базового шрифта документа, а не локального контекста.
Наглядный пример отличия работы rem от em.
Единицы измерения относительно экрана: vw, vh, vmin, vmax
Значения созданные для поддержки мобильных устройств. Их фишка в том, что размеры заданные в этих единицах масштабируются в зависимости от размеров окна браузера.
Поддерживаются единицы измерения vw, vh, vmin, vmax всеми современными браузерами за исключением IE8.
Ключевые свойства:
Критические ограничения:
Рекомендации:
Итого:
Viewport-единицы — мощный инструмент для истинно адаптивных макетов, но требуют контроля крайних состояний.
Единица | Значение |
1vw | 1% от текущей ширины окна просмотра |
1vh | 1% от текущей высоты окна просмотра |
1vmin | 1% от меньшего значения (min(vw, vh)) |
1vmax | 1% от большего значения (max(vw, vh)) |
Поддерживаются единицы измерения vw, vh, vmin, vmax всеми современными браузерами за исключением IE8.
Ключевые свойства:
- Динамичность: Значения обновляются при изменении размера окна.
- Независимость: Не зависят от родительских элементов и структуры DOM.
- Прямая привязка: Всегда рассчитываются от размеров видимой области (исключая скроллбары).
Критические ограничения:
- Проблема 100vh на мобильных: В мобильных браузерах 100vh может включать область за пределами видимой зоны (из-за скрывающихся панелей).
- Риск для типографики: Использование vw для font-size может привести к нечитаемым текстам на экстремальных размерах экрана.
Рекомендации:
- Для создания адаптивных интерфейсов используйте vmin/vmax для элементов, которые должны сохранять пропорции.
- Избегайте vw/vh для критически важных размеров без CSS-функций clamp() или медиазапросов.
Итого:
Viewport-единицы — мощный инструмент для истинно адаптивных макетов, но требуют контроля крайних состояний.
Единицы ex и ch
Единицы ex и ch, указанные в спецификации CSS, определяют высоту строчной буквы «x» и ширину символа «0» в текущем шрифте. Эти метрики присутствуют в данных шрифта всегда, даже если глифы «x» или «0» отсутствуют или заменены, что делает значения условными.
Практически не используются в разработке, так как единица em решает >95% задач по относительному масштабированию. Применяйте ex/ch исключительно для специализированных типографских решений.
Единицы ex и ch, указанные в спецификации CSS, определяют высоту строчной буквы «x» и ширину символа «0» в текущем шрифте. Эти метрики присутствуют в данных шрифта всегда, даже если глифы «x» или «0» отсутствуют или заменены, что делает значения условными.
Практически не используются в разработке, так как единица em решает >95% задач по относительному масштабированию. Применяйте ex/ch исключительно для специализированных типографских решений.
Устаревшие единицы: mm, cm, pt, pc
Единицы измерения mm, cm, pt и pc являются производными от пикселя (px) и считаются устаревшими в веб-разработке. Их фиксированные соотношения с пикселями:
Единицы измерения mm, cm, pt и pc являются производными от пикселя (px) и считаются устаревшими в веб-разработке. Их фиксированные соотношения с пикселями:
- 1mm = 3.8px
- 1cm = 38px
- 1pt = 4/3 px (≈1.33px)
- 1pc = 16px
Итоги
Пиксели (px):
Относительные к шрифту (em, ex, ch):
3. Корневой rem:
4. Проценты (%):
5. Viewport-единицы (vw, vh, vmin, vmax):
Сравнительная таблица:
- Тип: Абсолютные.
- Основа: Физические пиксели экрана (с учётом масштабирования).
- Роль: Базовая единица. Заменяет mm, cm, pt, pc.
- Применение: Точные размеры, где нужна предсказуемость.
Относительные к шрифту (em, ex, ch):
- em: Размер шрифта родителя.
- ex: Высота символа "x" текущего шрифта.
- ch: Ширина символа "0" текущего шрифта.
- Применение: Масштабируемые компоненты (кнопки, отступы).
3. Корневой rem:
- Основа: Размер шрифта <html>.
- Ключевое свойство: Независимость от каскада.
- Применение: Глобальное масштабирование (измените font-size в html → весь интерфейс адаптируется).
4. Проценты (%):
- Основа: Значение того же свойства у родителя (в 80% случаев).
- Критично: Исключения зависят от свойства (напр., line-height → от текущего шрифта, transform → от самого элемента).
- Применение: Ширины/высоты, адаптивные сетки.
5. Viewport-единицы (vw, vh, vmin, vmax):
- Основа: Размеры окна браузера:
- vw: % ширины окна.
- vh: % высоты окна.
- vmin: % меньшей стороны.
- vmax: % большей стороны.
- Применение: Полноэкранные блоки, адаптивная типографика, сохранение пропорций.
Сравнительная таблица:
Единица | Источник размера | Когда использовать |
px | Физический пиксель | Границы, тени, фикс. размеры |
em | Шрифт родителя | Локальное масштабирование |
rem | Шрифт <html> | Глобальное масштабирование |
% | Свойство родителя (часто) | Адаптивные сетки |
vw/vh | Окно браузера | Полноэкранные блоки |
