Единицы измерения

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

Классификация единиц измерения

Сначала полезно разделить все доступные единицы измерения на две большие группы: абсолютные единицы и относительные единицы.

Абсолютные единицы имеют фиксированное значение.

К абсолютным относятся уже знакомые нам пиксели. Они используются чаще всего. Существуют также гораздо более редкие единицы позволяющие задать размер в миллиметрах (mm), сантиметрах (cm) или дюймах (in). За все время работы я ни разу не встречал их использование, но в спецификации они есть, поэтому стоит помнить о них. Вдруг кто-то спросит на собеседовании.

Относительные единицы измерения зависят от контекста, т.е. каких либо условий.

Это значит, что если мы, например, зададим ширину компонента в относительных величинах, его реальный размер будет зависить например от размера устройства пользователя. Для больших экранов будет больший размер. Мы рассмотрим относительные величины подробнее, чуть ниже.

Проценты (%)

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

Например, при указании width: 50% ширина элемента будет высчитана как 50% (половина) от ширины родителя. Аналогично padding: 10% означает, что внутренний отступ будет составлять 10% от ширины родителя, а не размеров самого элемента.

В примере ниже ширина дочернего элмента с классом .child будет 160px (400 x 0.4 = 160):

.parent {
  width: 400px;
}

.child {
  width: 40%;
}
css

Существуют случаи, когда проценты расчитываются отностильно размеров самого элмента, но используются они довольно редко. Например, мы можем задать смещение фона с помощью background-position-x: 40%, и в таком случае расчет будет производиться исходя из размеров самого элемента.

Единицы, которые считаются отностительно окна браузера

Существует целый ряд отностиельных единиц измерения, которые расчитываются относительно размеров экрана устройства пользователя.

Наиболее часто используемыми являются vh и vw.

vh - это аббревиатура от viewport height - высота вьюпорта. 1vh означает 1% от доступной высоты экрана устройства пользователя. Блок с размером 100vh займет всю высоту экрана.

vw - работает аналогично, но размер считается от ширины экрана - viewport width.

Также при определении размеров элементов для мобильных устройств бывает полезно учитывать ориентацию девайса. В таких случаях удобно использовать vmin или vmax. Например, пользователь использует устройство с разрешением 1200×800. В таком случае 1vmin это 8px, а 1vmax это 12px.

Несколько лет назад в спецификации CSS появилось несколько дополнительных единиц измерения, которые особенно полезны при работе с мобильными устройствами. Из-за того, что на мобильных устройствах размеры экрана сильно ограничены, разработчики используют различные панели, которые могут скрываться и появляться в зависимости от действий пользователя. Например, при появлении панели навигации вверху или внизу экрана элемент с высотой 100vh будет перекрываться. Поэтому появились уточнённые единицы:

• svh, svw — small viewport. Минимальный возможный размер (когда панели видны)

• lvh, lvw — large viewport. Максимальный размер (когда панели скрыты)

• dvh, dvw — dynamic viewport. Динамически обновляются при скролле (самые надёжные). Сейчас эти единицы лучший выбор для мобильной вёрстки, если поддержка браузеров позволяет.

Единицы измерения, которые считаются от размера шрифта

Часто вместо определения размеров шрифтов в пикселях удобно использовать относительные величины. Они позволяют, также как и другие отностиельные величины, расчитывать размер шрифта относительно какой-то другой величины.

Первая такая величина - em. Часто можно найти информацию, что em образовано от ephemeral unit, буквально эфемерная единица. Но исторически em пришёл из типографики и означает ширину буквы M. 1em = текущий font-size элемента. Рассмотрим такой пример:

.parent {
  font-size: 20px;
}

.child {
  font-size: 1.5em; /* 30px */
}
css

В блоке с классом .child размер шрифта будет равен 30 пикселям (20px * 1.5 = 30px).

Если em используется не для шрифта, он всё равно считается от font-size элемента. Например мы можем задавать отступы используя em:

.child {
  padding: 1em;
}
css

Важно помнить про эффект "снежного кома" - накоплении em при вложенности — иногда это фича, а иногда становится проблемой:

.parent {
  font-size: 2em;
}

.child {
  font-size: 1.5em;
}
css

В этом примере если у родителя элемента с классом .parent размер шрифта был 20 пикселей, то в .parent будет 40px, а в .child уже 60px.

Избежать проблемы "накопления" размера позволяет другая единица измерения - rem (от root ephemeral unit). rem не зависит от вложенности и берется отностительно корневого элемента страницы - html, обычно это 16px.

Если размер страницы был изменён глобально, то есть через настройки операционной системы или с помощью Ctrl + / Ctrl -, то значение шрифта у <html> также пропорционально изменится, даже если оно было задано явно. Соответвенно значение rem также обновиться и везде, где оно использовалось, размеры также изменяться в соответсии с заданными пропорциями.

Когда что использовать

При выборе единиц измерения важно отталкиваться не от привычки, а от задачи, которую вы решаете. Ниже приведены наиболее распространённые сценарии и подходящие для них единицы измерения. В общих случаях можно пользоваться простыми правилами:

• для размеров шрифтов - оптимально использовать rem;

• для блоков и всевозможных контейнеров - % или vw, vh и их вариации;

• для мелких деталей - px

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