Единицы измерения в CSS
В данной статье рассмотрим единицы измерения в css. Рассмотрим в чем разница абсолютных и относительных единиц и какие лучше использовать в разных случаях.
Абсолютные единицы измерения
Абсолютные единицы имеют фиксированный размер и не зависят от устройства или браузера пользователя. В 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.
Заключение
Css предлагает много вариантов задания размеров. Для разных случаев удобно использовать разные единицы измерения.
Для задания размеров блокам удобно использовать % или задавать значения в пикселях px для свойств max-width, min-width, чтобы было удобно делать адаптивную верстку.
Для задания размера шрифтам часто используют em и rem. Например, чтобы увеличить шрифт для мобильных устройств, нужно будет изменить значение только у html элемента при использовании rem единиц.
Значения vh, vw, vmin, vmax удобно использовать, например, для модальных окон или если нужно чтобы секция сайта была на весь экран пользователя.
Значения ex, ch более экзотические и используются крайне редко.
Обсуждение (1)
Войдите или зарегистрируйтесь для того чтобы оставлять комментарии