Единицы измерения px, %, em, rem, fr и другие

px

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

%

Процентное соотношение, зависящее от ширины, высоты или размера шрифта родительского элемента. При position:fixed берется ширина, высота экрана. У применения % со свойством height и min-height есть свои особенности.

em

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

input[type=checkbox]+label>span{
margin-right: 1em;
width: 1em;
height: 1em;
}

В этом примере размер и расстояния чекбокса будут зависеть от размера шрифта родителя.

ex, ch

Крайне редкие единицы, которые означают размер символа "x" и размер символа "0".

rem

Относительная единица, отчитывающаяся от размера шрифта элемента <html>. По умолчанию браузеры ставят вполне разумный размер, но для удобства счета, его можно переопределить под сочетание с px

html { 
font-size:62.5%; 
-webkit-text-size-adjust:100%; 
-ms-text-size-adjust:100%;
}

С этим правилом 1.4rem будет равняться 14px.

vw, vh, vmin, vmax

  • vw – 1% ширины окна
  • vh – 1% высоты окна
  • vmin – наименьшее из (vw, vh), в IE9 обозначается vm
  • vmax – наибольшее из (vw, vh)

Размеры, которые в них заданы, автоматически масштабируются при изменении размеров окна.

fr

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

grid-template-columns: 1fr 1fr 1fr 1fr; — выдаст одинаковые столбцы,

grid-template-columns: 300px 1fr .5fr 5fr; — браузер подсчитает размер пространства определенное под fr, и разделит на указанное значение. В данном случае, из общей ширины контейнера вычтится ширина статичных значений (300px), оставшаяся часть контейнера будет разделена на 6.5 частей (сумма указаных частей в значении) и поделена между столбцами соответственно указанным размерам.

Канули в лету

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