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

Пиксель px – это самая базовая, абсолютная и окончательная единица измерения.

Количество пикселей задаётся в настройках разрешения экрана, один px – это как раз один такой пиксель на экране. Все значения браузер в итоге пересчитает в пиксели.

Пиксели могут быть дробными, это совершенно нормально,

Давно на свалке: mm, cm, pt, pc

Существуют также «производные» от пикселя единицы измерения: mm, cm, pt и pc, но они давно отправились на свалку истории. Вот, если интересно, их значения:

• 1mm (мм) = 3.8px
• 1cm (см) = 38px
• 1pt (типографский пункт) = 4/3 px
• 1pc (типографская пика) = 16px

Так как браузер пересчитывает эти значения в пиксели, то смысла в их употреблении нет.

Процент - %. Проценты – относительные единицы. Как правило, процент будет от значения свойства родителя с тем же названием, но не всегда.

Шрифтов значение процентов высчитывается относительно значения свойства родительского тега. Это значит, что если текст будет вложенным, то его значение будет меняться в зависимости от того тега, в который он вложен.

<p>Lorem 
  <span>Lorem
    <span>Lorem</span>
  </span>
</p>

p {
   font-size: 100%;
}
p>span {
   font-size: 50%;
}
p>span>span {
   font-size: 400%;
}

Учитывая что по-умолчанию браузер использует значение в 16px здесь получим: 16px, 8px и 32px

• margin-left - При установке свойства margin-left в %, процент берётся от ширины родительского блока, а не от его margin-left. line-height
• line-height - При установке свойства line-height в %, процент берётся от текущего размера шрифта, а не от line-height родителя. (Детали по line-height и размеру шрифта можно найти в статье Свойства font-size и line-height ). width/height
• width/height - Для width/height обычно процент от ширины/высоты родителя, но при position:fixed, процент берётся от ширины/высоты окна (а не родителя и не документа). (Кроме того, иногда % требует соблюдения дополнительных условий: Особенности свойства height в % ).

1em – текущий размер шрифта. Можно брать любые пропорции от текущего шрифта: 2em, 0.5em и т.п.

Размеры в em – относительные, они определяются по текущему контексту.

Пример с em вместо px:

<div style="font-size:1.5em">
  Страусы
  <div style="font-size:1.5em">Живут также в Африке</div>
</div>

Так как значение в em высчитывается относительно текущего шрифта, то вложенная строка в 1.5 раза больше, чем первая.

Соответственно, размеры, заданные в em, будут уменьшаться или увеличиваться вместе со шрифтом.
С учётом того, что размер шрифта обычно определяется в родителе, и может быть изменён ровно в одном месте, это бывает очень удобно.

Что такое размер шрифта? Это вовсе не «размер самой большой буквы в нём». Размер шрифта – это некоторая «условная единица», которая встроена в шрифт. Она обычно чуть больше, чем расстояние от верха самой большой буквы до низа самой маленькой. То есть, предполагается, что в эту высоту помещается любая буква или их сочетание. Но при этом «хвосты» букв, таких как р, g могут заходить за это значение, то есть вылезать снизу. Поэтому обычно высоту строки делают чуть больше, чем размер шрифта.

Единица rem задаёт размер относительно размера шрифта элемента <html>.

Элементы, размер которых задан в rem, не зависят друг от друга и от контекста – и этим похожи на px, а с другой стороны они все заданы относительно размера шрифта <html> - и Этим похожи на em.

Это единицы измерения которые относятся к размеру экрана устройства. Все те значения, которые начинаются с буквы V, имеют в себе сокращение слова с английского «viewport» («область просмотра»).

Итого:

• vh = 1/100 высоты области просмотра
• vw = 1/100 ширины области просмотра
• vmin = 1/100 наименьших высоты или ширины области просмотра
• vmax = 1/100 наибольших высоты или ширины области просмотра

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

Запись

.box-vw .text-1 {
   font-size: 2vw;
}

значит, что на экране монитора, у которого будет значение 1200px, элемент будет равен 24px. Откуда берется это значение? Это 2% от 1200px, то есть 1200px * 0.02 = 24px. При этом если взять, например, планшет, который в среднем составляет ширину 768px, то размер шрифта составит примерно 15px, то есть это 2% от 768px.

(!)Note: Значения vmin и vmax не применимы к font-size