Единицы размеров в 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

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

Эффект тряски элемента на сайте при наведении с помощью CCS3

Октябрь 23, 2015 г.

В последнее время как то кучно пошло у меня использование CCS3 анимации. Продолжаю делиться шаблонами. Сегодня рассмотрим анимацию, которая, запускаясь при наведении, имитирует дрожание элемента. Её можно подключать и в других случаях (не только при наведении). ...

Читать

Цвет HR - как изменить в CSS

Апрель 27, 2017 г.

Горизонтальная линия HR - независимый HTML элемент - вызывает много вопросов у начинающих. Основная проблема - установка цвета. Установка стилей ...

Читать

Ошибка background-size:cover в Firefox при рендеринге svg

Сентябрь 21, 2021 г.

По какой то причине firefox не верно отрабатывает свойство background-size: cover для SVG. Чтобы воспроизвести попробуйте задать стили вроде: [crayon-69038137c24fe762479712/] Чтобы исправить ситуацию, вы можете заменить размер фона на следующий: ...

Читать

Псевдоклассы состояния контейнера input

Октябрь 24, 2018 г.

Хотелось бы выделить такой перечень css псевдоклассов и приемов работы с ними, который основан на состоянии элемента INPUT. :checked псевдокласс Позволяет писать стили для радио/чек - боксов, которые выделены (checked) в текущий момент. [crayon-69038137c2775373587753/] ...

Читать
 

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

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



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