Единицы размеров в CSS, отличия между REM, EM, PX и т.п.

В CSS размеры можно задавать с помощью разных единиц измерения: rem, em, px, % и другие. Разберём ключевые различия между rem, em и прочими.

EM — размер относительно размера шрифта родителя

2em внутри .child означает: в 2 раза больше font-size родителя. Внутри вложенных элементов em будет мультиплицироваться (компаундиться).

REM — размер относительно font-size корневого html

rem = root em. Не зависит от вложенности, только от html { font-size }.

Возникает закономерный вопрос — а можно ли использовать rem для самого контейнера html? Ответ — да.

И вот в чём нюанс: Когда вы задаёте rem для html {}, он обращаешься к самому себе. Поэтому rem в html {} будет зависеть от значения по умолчанию, заданного браузером (обычно 16px), если явно не переопределено раньше.

Другие единицы:

  • px — абсолютный пиксель (жёстко фиксирован, не масштабируется).
  • % — зависит от контекста (например, ширины родителя).
  • vw, vh — проценты от ширины/высоты окна браузера.
  • ch, ex — зависят от шрифта (ширина символа 0, высота x).

Когда использовать

Хочешь…Используй
Масштабируемый дизайн на всей страницеrem
Локальные размеры относительно font-size блокаem
Точный контроль, не зависящий от масштабаpx (осторожно)
Относительно размеров окнаvw / vh

Мало букафф? Читайте есчо !

Bootstrap extra large - стили для сетки свыше 1600 точек

Апрель 20, 2017 г.

3я версия Bootstrap определяет 4 размера сетки: <768px, ≥768px, ≥992px, ≥1200px. Этих размерностей явно не достаточно. В то время как на телефонах ...

Читать

Прогресс бары, анимация загрузки...

Январь 11, 2019 г.

Сайт, где вы найдете конструкторы анимации прогресс баров - loading.io. Я бы сказал налетай, подешевело, но всё абсолютно даром. Основная особенность ...

Читать

Анимация прокрутки в CSS: animation-timeline: scroll()

Сентябрь 1, 2025 г.

Ещё недавно для прогресс-бара чтения на сайте приходилось подключать JavaScript: отслеживать событие scroll, вычислять процент прокрутки и менять ширину элемента. Теперь это можно сделать чисто на CSS, благодаря новой возможности — Scroll-driven animations. ...

Читать

Выравнивание блока HTML (вертикально и горизонтально)

Сентябрь 17, 2015 г.

Центровка элемента - одна из типовых задач в верстке. Решать её можно по разному, рассмотрим некоторые способы. Горизонтальная центровка. С центровкой ...

Читать
 

Комментарии к «Единицы размеров в CSS, отличия между REM, EM, PX и т.п.»

Понравилась статья? Есть вопросы? - пишите в комментариях.



Комментарий: