Единицы измерения CSS - PX, EM, REM, %, VW, VH, VMIN, VMAX, FR, EX, CH

Единицы измерения CSS - PX, EM, REM, %, VW, VH, VMIN, VMAX, FR, EX, CH

Абсолютная единица - не зависит от значений других свойств. Ее можно назвать еще фиксированной или окончательной.

Относительная единица - зависит от того или иного значения других свойств.

PX - пиксели

Абсолютная (фиксированная) единица. Значение заданное в пикселях (px), четкое и понятное.

Как правило, в макетах дизайна мы видим размеры именно в пикселях. Поэтому, используя эту единицу мы легко можем переносить данные в код с точностью пиксель перфект. Это когда макетные размеры совпадают с версткой на все 100%.

Остальные единицы, так или иначе пересчитываются браузером все равно в пиксели.

Пиксели могут быть дробными, например размер можно задать в 16.5px.

Примеры

( i ) Размер шрифта браузера по умолчанию 16px

( i ) Свойство font-size наследуется потомками

Обычный текст
Привет! Это Фрилансер по жизни!
Живи, а работай в свободное время!
Подписывайся!
Ставь лайк!
И комментарий напиши!
Обычный текст (наследует font-size: 16px;)
Привет! Это Фрилансер по жизни! (задан font-size: 20px;)
Живи, а работай в свободное время! (задан font-size: 17.5px;)
Подписывайся! (наследует font-size: 17.5px;)
Ставь лайк! (задан font-size: 14.7px;)
И комментарий напиши! (задан font-size: 25px;)
width: 200px;
height: 200px;
padding: 15px;

Преимущества

Чёткость, понятность, простота использования.
Подходит для начинающих.

Недостатки

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

EM – относительна размеру шрифта

Относительная единица. Размер формируется относительно текущего или унаследованного размера шрифта (font-size).
1em равен значению font-size.

Как мы знаем, свойство размера шрифта font-size наследуется потомками. Поэтому, указывая тот или иной размер в EM нужно четко понимать какой размер шрифта влияет на данный элемент.
Как и пиксели, значение EM можно указывать дробные.

Примеры

( i ) Размер шрифта браузера по умолчанию 16px

( i ) Свойство font-size наследуется потомками

Обычный текст
Привет! Это Фрилансер по жизни!
Живи, а работай в свободное время!
Подписывайся!
Ставь лайк!
И комментарий напиши!
Обычный текст (наследует font-size: 16px;)
Привет! Это Фрилансер по жизни! (задан font-size: 1em; 1*16=16px)
Живи, а работай в свободное время! (задан font-size: 1.5em; 1.5*16 = 24px)
Подписывайся! (наследует font-size: 1.5em; 1.5*16 = 24px)
Ставь лайк! (задан font-size: 1.5em; 1.5*24 = 36px)
И комментарий напиши! (задан font-size: 0.8em; 0.8*24=19.2px)
Размер шрифта
по умолчанию 16px
width: 12.5em;
height: 12.5em;
padding: 0.9375em;

12.5 * 16 = 200px

0.9375 * 16 = 15px

Размер шрифта
задан 20px (font-size:20px;)
width: 12.5em;
height: 12.5em;
padding: 0.9375em;
font-size: 20px;

12.5 * 20 = 250px

0.9375 * 20 = 18.75px

Преимущества

Относительность EM позволяет на порядок уменьшить кол-во действий при адаптивной верстке. Не ограничивает пользователя в настройках браузера. Отлично подходит для указания размеров зависящих от размера шрифта. Также используется в медиа запросах.

Недостатки

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

REM - относительна размеру шрифта браузера

Относительная единица. Размер формируется относительно размера шрифта (font-size) в теге <html> или браузера по умолчанию.
1rem равен значению font-size в теге <html> или браузера по умолчанию.
Можно указывать дробные числа, например 1.5rem
Примеры

( i ) Размер шрифта браузера по умолчанию 16px

( i ) Свойство font-size наследуется потомками

Обычный текст
Привет! Это Фрилансер по жизни!
Живи, а работай в свободное время!
Подписывайся!
Ставь лайк!
И комментарий напиши!
Обычный текст (наследует font-size: 16px;)
Привет! Это Фрилансер по жизни! (задан font-size: 1rem; 1*16=16px)
Живи, а работай в свободное время! (задан font-size: 1.5rem; 1.5*16 = 24px)
Подписывайся! (наследует font-size: 1.5rem; 1.5*16 = 24px)
Ставь лайк! (задан font-size: 1.5rem; 1.5*16 = 24px)
И комментарий напиши! (задан font-size: 0.8rem; 0.8*16=12.8px)
Размер шрифта
по умолчанию 16px
width: 12.5rem;
height: 12.5rem;
padding: 0.9375rem;

12.5 * 16 = 200px

0.9375 * 16 = 15px

Размер шрифта
задан 20px (font-size:20px;)
width: 12.5rem;
height: 12.5rem;
padding: 0.9375rem;
font-size: 20px;

12.5 * 16 = 200px

0.9375 * 16 = 15px

Преимущества

Относительность REM позволяет на порядок уменьшить кол-во действий при адаптивной верстке. Не ограничивает пользователя в настройках браузера. Более простое использование. Отлично подходит для указания размеров шрифтов.

Недостатки

По сравнению с PX, работать с REM более сложно, ведь для переноса данных из макета в единицы в REM требуются вычисления, но проще чем с EM.

% - проценты от ...

Относительная единица. Можно указывать дробные числа, например 10.5%. Разные CSS свойства вычисляют процент относительно разных значений:

  • Ширина width - относительно ширины родительного элемента
  • Высота height - относительно высоты родительного элемента, но только если у него задана высота либо это флекс или грид элемент.
  • При относительном позиционировании (position: relative; + top left bottom right) нужны те же условия.
  • Для абсолютно позиционированных объектов - относительно высоты родительского элемента. При этом, задавать высоту родителю не обязательно.
  • Отступы padding \ margin - относительно ширины родительного элемента, даже если задаются вертикальные отступы.
  • transform: translate(x, y) - относительно ширины \ высоты самого объекта к которому применено свойство.
  • font-size и line-height - относительно размера свойства font-size
Примеры

( i ) Размер шрифта браузера по умолчанию 16px

( i ) Свойство font-size наследуется потомками

Обычный текст
Привет! Это Фрилансер по жизни!
Живи, а работай в свободное время!
Подписывайся!
Ставь лайк!
И комментарий напиши!
Обычный текст (наследует font-size: 16px;)
Привет! Это Фрилансер по жизни! (задан font-size: 100%; 16/100*100=16px)
Живи, а работай в свободное время! (задан font-size: 150%; 16/100*150=24px)
Подписывайся! (наследует font-size: 150%; 16/100*150=24px)
Ставь лайк! (задан font-size: 150%; 24/100*150=36px)
И комментарий напиши! (задан font-size: 80%; 24/100*80=19.2px)
Высота родителя 300px, ширина 400px
(height: 300px;width:400px;)
width: 50%;
height: 50%;
padding: 5%;
margin: 5%;

Ширина: 400/100*50 = 200px

Высота: 300/100*50 = 150px

Внутренние отступы: 400/100*5 = 20px

Внешние отступы: 400/100*5 = 20px

Высота родителя 300px, ширина 400px
(height: 300px;width:400px;)
width: 50%;
height: 70%;
padding: 5%;
position: relative;
left: 10%;
top: 5%;

Ширина: 400/100*50 = 200px

Высота: 300/100*70 = 210px

Внутренние отступы: 400/100*5 = 20px

Вправо: 400/100*10 = 40px

Вниз: 300/100*5 = 15px

Высота родителя 300px, ширина 400px
(height: 300px;width:400px;)
width: 70%;
height: 50%;
padding: 5%;
transform: translate(10%, 5%);

Ширина: 400/100*70 = 280px

Высота: 300/100*50 = 150px

Внутренние отступы: 400/100*5 = 20px

Вправо: 280/100*10 = 28px

Вниз: 150/100*5 = 7.5px

Преимущества

Относительность процентов позволяет на порядок уменьшить кол-во действий при адаптивной верстке. Не ограничивает пользователя в настройках браузера. Отлично подходит для построения относительных конструкций и позиционирования объектов.

Недостатки

Требуют хорошего знания теории и четкого понимания - процент от чего вычислятестя в тот или иной момент

VW, VH, VMIN, VMAX - относительно окна (вьюпорта) браузера

Все они так или иначе работают относительно окна браузера, так называемого вьюпорта.
Вьюпорт, простыми словами, это вот эта рамка через которую мы просматриваем сайт.

Итак VW работает относительно ширины вьюпорта, VH относительно высоты вьюпорта.
VMIN - относительно наименьшего значения из (VW, VH). VMAX - относительно наибольшего значения из (VW, VH).

100vw равно ширине окна браузера (вьюпорта), 100vh равно высоте окна браузера (вьюпорта).
100wmin равно наименьшему из (vw, vh), 100vmax равно наибольшему из (vw, vh)

Примеры

( i ) Размер шрифта браузера по умолчанию 16px

( i ) Свойство font-size наследуется потомками

Обычный текст
Привет! Это Фрилансер по жизни!
Живи, а работай в свободное время!
Подписывайся!
Ставь лайк!
И комментарий напиши!
Обычный текст (наследует font-size: 16px;)
Привет! Это Фрилансер по жизни! (задан font-size: 1.5vw;)
Живи, а работай в свободное время! (задан font-size: 1.5vmax;)
Подписывайся! (задан font-size: 2.5vmin;)
Ставь лайк! (задан font-size: 1.8vh;)
И комментарий напиши! (наследуется font-size: 1.5vw;)
width: 50vw;
height: 15vh;
padding: 1vmax;

Преимущества

Относительность VW, VH, VMIN, VMAX позволяет на порядок уменьшить кол-во действий при адаптивной верстке. Не ограничивает пользователя в настройках браузера. Можно привязаться к размерам вьюпорта, что позволяет строить отзывчивые свойства.

Недостатки

Сложность в использовании. Нужно обладать хорошими знаниями адаптивной верстки и возможностей CSS. На мобильных устройствах, при работе на всю высоту вьюпорта (100vh), требуются дополнительные действия на JS.

FR, EX, CH, MM, CM, PT, PC - прочие единицы

  • FR - единица измерения в модуле GRID. Указавает какую часть (фрагмент) должен занимать тот или иной грид-элемент. Значения могут быть дробными, например 0.5fr. Отлично работает с отступами gap
  • EX - единица работающая относительно размера латинского символа "x" (прописная). Используется редко
  • CH - единица работающая относительно размера символа "0" (ноль). Используется редко

Единицы MM, CM, PT, PC являются производными от пикселя и уже не используются

Формулы конвертации значений из PX в относительные единицы:

  • из PX в EM - значение в PX поделить на значение font-size (текущее или унаследованное)
  • из PX в REM - значение в PX поделить на значение font-size указанное для тега HTML (если не указано то на 16)
  • из PX в % - значение в PX поделить на значение относительно которого высчитывается процент и умножить на 100

Материал является дополнением к выпуску «CSS EM REM и прочие единицы измерения CSS. Что когда использовать? Подробное объяснение на практике.»