Использование единиц px, em, rem в CSS

Многие люди путаются при работе с данными тремя единицами в CSS. Главной причиной этого будет отсутствие понимания различий имеющихся между ними.

Для начала необходимо усвоить базовое понимание данных единиц:

  • Px(пиксель) – это единица измерения величины объектов относительно размера экрана.
  • Em – это единица, основанная на размере шрифта родительского элемента(в пикселях).
  • Rem – это единица,основанная на размере шрифта корневого элемента html(в пикселях).

Мы можем использовать данные единицы в разных свойствах CSS, таких как font-size, padding, margin, position.

Px

Пиксели представляют собой неделимые объекты прямоугольной или круглой формы, размеры которых зависят от диагонали экрана устройства. Пиксель– это фиксированная единица, которая применяется к отдельным элементам там, где она определяется.

Пример:

div { font-size: 10px; padding: 10px; }

Эта строка кода CSS устанавливает размер шрифта в 10px и отступы размером в 10px со всех сторон.

Em

Единицы измерения em зависят от размера шрифта родительского элемента. Это не фиксированные единицы, так как они зависят от базового размера. Когда изменяется размер родительского элемента, меняется и значение em.

Пример:

div { font-size: 10px; padding: 10em; }

Данный код CSS устанавливает размер шрифта в 10px, и отступы толщиной в 100px с каждой стороны, так как размер берётся из свойства font-size. В нем каждое значение принимается за 1em, то есть(10px = 1em, так что 10em = 10px * 10 = 100px).

Rem

Единица измерения rem зависит от размера шрифта, заданного в браузере по умолчанию, или размера шрифта, при именного к элементу html. Если базовый размер меняется, то значение rem также изменяется. Вы можете без проблем настроить размер шрифта, используемый по умолчанию, в параметрах браузера.

Пример:

Допустим, размер шрифта, используемый по умолчанию в браузере – 14px.

div { font-size: 10px; padding: 10rem; }

Этот код установит размер шрифта в 10px и отступы в 140px с каждой стороны. При этом базовым будет размер шрифта по умолчанию, заданный в браузере, который берётся за 1rem. То есть: 14px = 1rem, так что 10rem = 14px * 10 = 140px.

Путаница между em и rem

Вопрос, который возникает при использовании данных единиц измерения: «Какие же единицы применять?» Особенно это касается em и rem. Какие элементы установить зависимыми от базового размера,а для каких применять динамические единицы измерения?

  • Задача: задать размер элемента относительно размера шрифта, используемого по умолчанию на веб-сайте, там, где не необходимо менять размеры. В этом случае “rem” предпочтительнее.
  • Чтобы использовать динамические единицы измерения там, где при уменьшении размера шрифта уменьшаются отступы или поля ввода, применяйте “em”.

Вложенные элементы

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

Пример:

div.parent { font-size: 10px; }div.parent div.child { font-size: 0.5em; }

Этот код установит размер шрифта родительского элемента в 10px, а шрифт дочернего элемента в 5px.Поскольку его размер зависит от значения font-size родительского элемента, которое принимается за 1em. То есть:10px = 1em, так что 0.5em = 10px / 2 = 5px.

Комбинированный пример

Предположим, что размер шрифта, используемый по умолчанию в браузере,составляет 14px. Как это отразится на всех трёх единицах измерения?

Пример:

div.parent { font-size: 10px; padding: 10em; margin: 10rem;}div.parent div.child { font-size: 0.5em; padding: 10em; margin:10rem}

Для( div.parent)

  • Размер шрифта = 10px.
  • Внутренние поля ввода с каждой стороны(10px = 1em, так что 10em * 10px) = 100px.
  • Отступы с каждой стороны(14px = 1rem, так что 10rem * 14px) = 140px.

Для( div.child)

  • Размер шрифта(0.5em = 10px / 2) = 5px.
  • Внутренние поля ввода с каждой стороны(5px = 1em, так что 10em * 5px) = 50px.
  • Отступы с каждой стороны(14px = 1rem, так что 10rem * 14px) = 140px.

Ключевым для стилей дочернего элемента будет свойство font-size, так как оно наследуетсяот родительского элемента.Для него размер шрифта задан в 10px, а в дочернем элементе он установлен в 0.5em. То есть, делится на два(как размер шрифта дочернего элемента).

Поля ввода зависят от размера шрифта текущего элемента. За 1em принимается размер в 5px,(размер шрифта дочернего элемента).

Только отступы постоянны в обоих случаях. Они прямо наследуются от корневого элемента html. Базовый размер шрифта в 14px неизменен, так что поля ввода будут иметь размер 140px в обоих случаях.

Заключение

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *