• Главная
>
• HTML/CSS

На первый взгляд, единицы измерения в CSS могут показаться сложными и запутанными. Они играют неоценимую роль в мире веб разработки, сильно влияя на отзывчивость и адаптивность сайтов. Чтобы создать по-настоящему ошеломляющие веб-страницы, важно понимать, как и когда использовать различные единицы измерения.

Абсолютные единицы измерения

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

• Пиксели (px)
• Пункты (pt)
• Дюймы (in)
• Сантиметры (cm)
• Миллиметры (mm)

Эти единицы подходят для конкретных и содержательных стилей, которые не требуют изменений на разных экранах.

Относительные единицы измерения

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

• Процент (%)
• em
• rem
• vh
• vw 

Более углубленное понимание этих единиц позволяет вам более точно контролировать макет и дизайн веб-страниц. Вот краткое описание каждой единицы:

Относительные Единицы краткое описание

Проценты (%): Проценты в CSS это относительные единицы измерения. Они расчитываются как процент от некоторого другого значения, обычно родительского элемента.

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

REM: Единицы rem имеют схожее со строение с em, но с одним важным отличием: они рассчитываются относительно размера шрифта корневого элемента (элемент

), а не родительского элемента.

VH: единица vh (viewport height) равна 1% от высоты видимой области (viewport). Это означает, что 100vh будет равно всей высоте области просмотра, что полезно для создания элементов, занимающих все доступное пространство по высоте.

VW: единица vw (viewport width) очень похожа на vh, но она относится к ширине видимой области. Это значит, что 100vw будет равно всей ширине области просмотра.

Относительные единицы меняются в зависимости от атрибутов других элементов или параметров. Каждая из этих единиц имеет свои нюансы и применения в разработке сайта.

На что стоит обратить внимание

Следует помнить, что выбор между относительными и абсолютными единицами должен базироваться на задачах и целях вашего проекта. Для некоторых сценариев подходят абсолютные единицы в то время как в других случаях прямо противоположно.

Используйте абсолютные единицы для элементов, которые должны быть конкретным размером, не зависимо от размеров окна просмотра или размера шрифта у пользователя.

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