В этом материале я хочу рассказать обо всех возможных единицах измерения в CSS . В большинстве случаев используют 1 , 2 , максимум 3 , однако, быть знакомыми со всеми единицами измерений всё-таки стоит, и в этом Вам поможет этот материал.

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

В этом материале я хочу рассказать обо всех возможных единицах измерения в CSS. В большинстве случаев используют 1, 2, максимум 3, однако, быть знакомыми со всеми единицами измерений всё-таки стоит, и в этом Вам поможет этот материал.

Для начала давайте разберём, что такое единицы измерений:

p {
  font-size: 14pt;
}

Вот именно pt - это пример единицы измерений. Мы задали размер шрифта 14 пунктов, давайте разберём, какие ещё есть единицы измерений в CSS:

ОбозначениеОписание
px Пиксели. Пиксель - это самая маленький объект, различимый на экране монитора.
em Размер в em зависит от текущего размера шрифта. Если стоит 1.5em, значит, данный размер в 1.5 раза больше, чем размер шрифта в данном элементе.
% Аналог em, но 100% - это 12pt. Также проценты позволяют легко масштабировать размеры под разные устройства.
ex 1ex - это высота строчной "х" у текущего шрифта.
pt Пункты. 1 пункт - это 1/72 дюйма.
sm Размер в сантиметрах.
mm Размер в миллиметрах.
in Дюймы. 1 дюйм - это 2.54 см.
pc Пики. 1 пика - это 12 пунктов.

Обратите внимание, что первые 4 единицы измерений - относительные, а следующие 5 - абсолютные. Я настоятельно стоит использовать только относительные размеры (за редким исключением), так как они масштабируются, и сайт будет смотреться на самых разных разрешениях нормально. На практике Вы будете использовать 2-3 единицы измерений, однако, если вдруг Вы встретите, например, пики, то теперь будете знать, что это такое.