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

Единица измерения Описание
ch Единица ch определяет ширину нулевого символа (0). Если браузер не может вычислить размеры этого символа (к примеру, для пользовательского шрифта), тогда ширина символа принимается равной 0.5em, а высота 1em.

Для моноширинного шрифта (например, Courier), в котором ширина всех символов одинакова, 1ch равен ширине одного произвольного символа. Для остальных шрифтов (Times, Helvetica и др.) любой символ может оказаться у́же или шире нуля.
cm Единица cm определяет размер в сантиметрах. Часто используется для определения размеров при печати документа.

1cm = 10mm = 96px
em Единица em соответствует значению свойства font-size элемента. Если это значение не задано, тогда берётся значение font-size родителя.
ex Единица ex определяет высоту буквы «x» в нижнем регистре.
in Единица in определяет размер в дюймах. В силу популярности метрической системы в веб-разработке дюйм применяется редко.

1in = 2.54cm = 25.4mm = 96px
mm Единица mm определяет размер в миллиметрах. Часто используется для определения размеров при печати документа. В одном сантиметре 10 миллиметров.
pc Единица pс определяет размер в типографских пиках.

1pc = 12pt = 1/6 дюйма
pt Единица pt определяет размер в типографских пунктах. Один пункт равен 1/72 дюйма (2,54 см). Пункты часто применяются в текстовых редакторах, вроде Microsoft Word, LibreOffice Writer, Apple Pages и др.
px Единица px определяет размер в пикселях. Обычно один пиксель соответствует одной точке экрана, но для принтеров и дисплеев высокого разрешения (таких как Apple Retina или экраны смартфонов) один пиксель может содержать несколько точек.
rem Единица rem соответствует значению свойства font-size корневого элемента html. Если rem добавляется непосредственно к font-size для html или стиль для html не задан, тогда 1rem принимается равным исходному значению font-size. В браузерах по умолчанию 1rem = 16px.
vh Единица vh соответствует 1% от высоты области просмотра браузера, таким образом, 100vh равно всей высоте области просмотра. Элементы, высота которых задана в единицах vh будут менять свой размер при изменении размеров окна браузера.
vmax Определяется как большее значение из vw и vh. К примеру, 10vmax сравнивает между собой размер 10vh (10% от высоты области просмотра) и 10vw (10% от ширины области просмотра), после чего выбирает большее значение.
vmin Определяется как меньшее значение из vw и vh. К примеру, 10vmin сравнивает между собой размер 10vh (10% от высоты области просмотра) и 10vw (10% от ширины области просмотра), после чего выбирает меньшее значение.
vw Единица vw соответствует 1% от ширины области просмотра браузера, таким образом, 100vw равно всей ширине области просмотра. Элементы, размер которых задан в единицах vw будут менять свой размер при изменении размеров окна браузера.
deg Единица deg определяет угол в градусах. Прямой угол равен 90 градусов, полный оборот соответствует 360 градусам. Допустимо использовать отрицательное значение (-90deg), нулевое (0deg) и дробное (36.6deg).
grad Единица grad используется для определения угла в градах. Прямой угол равен 100 град, полный оборот соответствует 400 град. Допустимо использовать отрицательное значение (-100grad), нулевое (0grad) и дробное (36.6grad).
rad Единица rad применяется для обозначения угла в радианах. Один радиан получается при длине дуги, равной радиусу окружности. Поскольку длина окружности непосредственно связана с числом π, то для пересчёта радиан в градусы и обратно используются следующие формулы:

deg = (rad * 360)/2π
rad = (deg * π)/180
turn Единица turn определяет угол в оборотах. 1turn, соответственно, равен одному обороту или 360 градусам. turn удобно использовать в анимации и трансформации элементов, когда требуется повернуть элемент на один или несколько оборотов.

0.25turn = 90deg = 100grad ≈ 1.5708rad
0.5turn = 180deg = 200grad ≈ 3.1416rad
0.75turn = 270deg = 300grad ≈ 4.7124rad
1turn = 360deg = 400grad ≈ 6.2832rad
-0.25turn = -90deg = -100grad ≈ -1.5708rad
s Единица s определяет время в секундах. Допустимо указывать дробные значения, к примеру, 0.5s или 3.2s.

В одной секунде 1000 миллисекунд, поэтому 1s = 1000ms.
ms Единица ms определяет время в миллисекундах. В одной секунде 1000 миллисекунд, поэтому 1000ms = 1s, а 100ms = 0.1s.
dpi Единица dpi применяется для обозначения количества точек на дюйм. dpi может использоваться для определения экранов смартфонов и дисплеев высокого разрешения.
dpcm Единица dpcm применяется для обозначения количества точек на сантиметр. dpcm может использоваться для определения экранов смартфонов и дисплеев высокого разрешения.
dppx Единица dppx применяется для обозначения количества точек на пиксель. dppx может использоваться для определения экранов смартфонов и дисплеев высокого разрешения.

1dppx = 96dpi