Абсолютные единицы измерения
Абсолютные единицы имеют фиксированный размер и не зависят от устройства или браузера пользователя. В css есть 6 абсолютных единиц: px, cm, mm, pt, pc, in.
Из абсолютных единиц чаще всего используют пиксели, так как они являются самыми понятными и удобными. Другие абсолютные единицы использовать не очень удобно, так как в итоге браузер пересчитывает их значения в пиксели, а размер пикселя может быть разным в зависимости от экрана.
- px — пиксели (физические пиксели экрана)
- cm — сантиметры (38px)
- mm — миллиметры (3.8px)
- pt — пункты (4/3px)
- pc — пики (16px)
- In — дюймы (96px)
Относительные единицы измерения
Относительные единицы измерения более часто используются, они позволяют удобно создавать адаптивную верстку, хотя некоторые элементы все же удобнее задавать в абсолютных единицах. Как понятно из названия значения задаются относительно другой величины. В css есть 9 относительных единиц:
- % — проценты. Если указать размер блока в процентах, то размер будет рассчитываться относительно родительского элемента. Если указывать размер текста, то он будет рассчитываться относительно текущего значения font-size.
- em — значение относительно текущего размера шрифта. Чаще всего используется для задания размера шрифта. Например, если по умолчанию размер шрифта установлен 16px, значение 1em будет соответствовать этому же значению, 2em равно 32px.
- rem — значение относительно размера шрифта (font-size) корневого элемента (<html>). Используется по аналогии с em.
- ex — значение относительно высоты символа ‘x’
- ch — значение относительно ширины символа ‘0’
- vh — значение относительно высоты области просмотра (viewport), значения от 0 до 100
- vw — значение относительно ширины области просмотра (viewport), значения от 0 до 100
- vmin — значение относительно меньшего значения vh или vw, значения от 0 до 100
- vmax — значение относительно большего значения vh или vw, значения от 0 до 100
Небольшое пояснение для vmin / vmax. Если ширина области просмотра больше высоты, то vmin будет рассчитываться от высоты, а vmax от ширины. Например ширина области просмотра 1000px, а высота 400px, то значение 1vmin = 4px, 1vmax = 10px.
Для задания размеров блокам удобно использовать % или задавать значения в пикселях px для свойств max-width, min-width, чтобы было удобно делать адаптивную верстку.
Для задания размера шрифтам часто используют em и rem. Например, чтобы увеличить шрифт для мобильных устройств, нужно будет изменить значение только у html элемента при использовании rem единиц.
Значения vh, vw, vmin, vmax удобно использовать, например, для модальных окон или если нужно чтобы секция сайта была на весь экран пользователя.
Значения ex, ch более экзотические и используются крайне редко.
