Единицы измерения CSS: rem vs em
18 февраля, 2022 11:40 дп 4 418 views | Комментариев нетDevelopment | Amber | Комментировать запись
В CSS есть множество удобных и полезных единиц измерения. Относительные единицы в современном мире адаптивного дизайна (такие как em или rem) дают нам адаптируемость и гибкость прямо «из коробки», позволяя определять размеры элемента на основе размера шрифта, определенного выше в разметке.
Читайте также: Какие бывают единицы измерения в CSS
Вероятно, вы уже пользовались единицами измерения em и rem ранее, но, возможно, еще не вполне разобрались, в чем разница между ними и какая единица лучше подходит для ваших случаев. Давайте коротко рассмотрим эту разницу.
Резюме: единица em в свойстве font-size относится к размеру шрифта родительского элемента. В остальных свойствах em относится к размеру шрифта текущего элемента.
Единица измерения em
em заимствована из мира типографики. Это единица, которая позволяет установить размер шрифта элемента относительно размера шрифта его родителя.
Возьмем этот простой пример:
.parent {
font-size: 18px;
}
.child {
font-size: 1.5em;
}В этом примере дочерний элемент будет иметь размер шрифта 27 пикселей (1,5 * 18 пикселей = 27 пикселей).
Если родительский элемент не указывает значение для размера шрифта, значение будет искаться выше в дереве DOM. Если размер шрифта не указан вплоть до корневого элемента (<html>), то используется стандартное значение браузера – 16px.
Довольно просто и ясно, верно? Однако единицы em можно использовать не только для установки размера шрифта – они подходят практически везде (для определения отступов, полей, ширины, высоты, максимальной ширины и т.д.) Если единица em используется для других свойств, а не для font-size, значение относится к собственному размеру шрифта элемента.
Добавим к нашему приведенному выше примеру:
.parent {
font-size: 18px;
}
.child {
font-size: 1.5em;
padding: 2em 1em;
}- Отступы сверху и снизу на .child будут составлять 54 пикселя. Это в 2 раза больше размера шрифта нашего текущего элемента (2 * 27 пикселей).
- Отступы слева и справа .child будут иметь размер 27 пикселей. Это в 1 раз больше размера шрифта элемента.
Помните: когда единица em используется в свойстве font-size, размер определяется относительно размера шрифта родителя. При использовании в других свойствах значение зависит от размера шрифта самого элемента.
Недостаток em
С единицей em бывают проблемы – эта единица может компоноваться с одного уровня на другой.
Давайте взглянем на такой базовый пример:
.parent {
font-size: 15px;
}
.child {
font-size: 2em;
}Теперь мы попробуем использовать его в нашей разметке следующим образом:
<div> I'm 15px <div> I'm 30px, as expected <div> I'm 60px, trouble starts! <div> I'm 120px, now we're really in trouble! </div> </div> </div> </div>
Вот что получится:
I’m 15px
I’m 30px, as expected
I’m 60px, trouble starts!
I’m 120px, now we’re really in trouble!
Итак, как вы можете видеть, эффект единиц em может нарастать, если несколько элементов с размером шрифта em находятся внутри друг друга.
Именно эта проблема и стала причиной для создания модуля rem.
Единица измерения rem
Единица rem, сокращенно от root em, является относительной единицей, значение которой всегда основывается на значении размера шрифта корневого элемента, <html>. И если элемент <html> не имеет конкретного размера шрифта, используется значение браузера по умолчанию, 16 пикселей.
Это означает, что при использовании rem значения родительских элементов игнорируются, во внимание принимается только значение root.
Давайте рассмотрим пример кода с rem:
.html {
font-size: 16px;
}
.parent {
font-size: 15px;
}
.child-rem {
font-size: 2rem;
}Применим его:
<div> I'm 15px <div> I'm 32px, as expected <div> I'm 32px, yep! <div> I'm 32px, like clockwork! </div> </div> </div> </div>
И получим:
I’m 15px
I’m 32px, as expected
I’m 32px, yep!
I’m 32px, like clockwork!
Как вы можете видеть, единица rem позволяет избежать «комбинированного эффекта» единицы em.
То же самое относится и к другим значениям помимо font-size (margin, padding и т.д.). Использование единиц rem в них по-прежнему будет относиться к размеру шрифта корневого элемента.
em vs rem: что лучше?
На самом деле нет лучшего варианта, все зависит от ваших личных предпочтений. Некоторым людям нравится проектировать все в единицах rem для согласованности и предсказуемости, в то время как другим нравится использовать единицы em в тех местах, где влияние ближайших родительских элементов имеет смысл. Какую единицу измерения использовать – решать вам.
О единице измерения em в CSS
При работе с CSS всегда наступает такой момент, когда начинаешь понимать, насколько мощным является то или иное его средство.
Несмотря на то, что я довольно хорошо понимаю единицу измерения em CSS, по-настоящему прочувствовал их силу только после того, как прочитал запись Simurai. В этой статье я собираюсь использовать его опыт.
- Что такое em?
- Изменение размеров уровней компонента
- Некоторые замечания, упущения и т.д.
- Что насчет rem и Sass?
- Заключение
В CSS единица измерения em равна текущему размеру шрифта элемента, к которому применяется em. Когда единицы измерения em используются в дочерних элементах, которые не имеют определенного размера шрифта, они наследуют его от родителей, вплоть до корневого элемента документа.
Посмотрите на следующий код CSS:
.example {
font-size: 20px;
}В данном случае 1em этого элемента или его дочерних элементов (при отсутствии других определений font-size) будет равен 20px. Так что, если мы добавим строку:
.example {
font-size: 20px;
border-radius: .5em;
}Значение border-radius равное 5em будет равно 10px (то есть 20 * 0,5).
Аналогично:
.example {
font-size: 20px;
border-radius: .5em;
padding: 2em;
}Значение отступа 2em будет равно 40px (20 * 2). Как уже упоминалось, этот тип вычислений применяется к любым дочернему элементу, если у него нет явно определенного размера шрифта. Тогда величина единицы измерения em в CSS будет вычислена подобным образом.
Если в CSS размер шрифта не определен, то em будет равна размеру шрифта, используемого по умолчанию в браузере. Чаще всего это значение составляет 16px. Давайте рассмотрим, как можно использовать этот метод для легкого изменения размера элементов.
Понятие «компоненты» довольно популярно сейчас. Оно хорошо подходит для модульных методов CSS, а также для идеи инкапсулированных разделов кода в целом. И я предполагаю, что следующий метод будет еще более интересным, когда веб-компоненты получат широкую поддержку.
Метод работает следующим образом: используется свойство font-size, которое создает основную единицу для различных элементов внутри модуля.
Поскольку единица измерения em рассчитывается на основе font-size родительского элемента, то это делает весь компонент легко редактируемым путем изменения свойства font-size родительского элемента.
Давайте посмотрим на это в действии:
Этот модуль состоит из четырех основных элементов. Подвигайте слайдер в верхней части на демонстрационной странице, чтобы изменить размер модуля. Если хотите, можете просмотреть его в полноэкранном режиме. Слайдер содержит одно значение корневого элемента компонента: значение font-size.
Следует отметить, что установка размеров компонента через одно свойство CSS не обязательна, пользователь может менять размеры в настройках. Это сделано для того, чтобы разработчик мог быстро внести изменения, не перебирая различные значения во всех частях компонента.
Когда размер шрифта изменяется, это сказывается на всех em CSS значениях родительского элемента, а также всех его дочерних элементах, делая все части компонента пропорционально гибкими.
Обратите внимание, что:
- Внутри компонента все размеры задаются с помощью em. Кроме внешней границы и изображения, которое при желании можно изменить, но меня устраивает размер, который в данном случае статичен;
- Значок в правом верхнем углу, похожий на слезинку — это псевдоэлемент, который аналогичным образом использует размер шрифта родительского элемента;
- CSS также включает в себя два медиа-запроса, которые корректируют размер шрифта родительского элемента. Что показывает полноценность этого метода, потому что не нужно менять все размеры в медиа-запросах, а только размер шрифта.
Как видно на примере, этот тип гибкого изменения размера не всегда то, что стоит использовать. Его можно несколько ограничить.
Возможно, вам придется подправить некоторые значения единицы измерения em в CSS. И как в случае с границей родительского элемента в примере, вы вряд ли захотите изменить размер. Так как свойство применяется ко всем элементам. Можно решить эту проблему, просто избегая em элементов, которые хотите сохранить.
Не нужно использовать пиксели, чтобы установить корневой font-size. Вы можете использовать для этого em, но помните, что эти единицы измерения будут передаваться по наследству от родителей.
Единица rem в CSS всегда наследует значение размера шрифта корневого элемента независимо от вычисленного размера шрифта. В HTML корневым является элемент <html>. Таким образом можно использовать rem. Но это означает, что вы должны будете управлять всеми компонентами на странице, используя размер шрифта этого элемента. Это может сработать в некоторых проектах, но я думаю, что этот метод лучше всего работает при изменении размеров отдельного компонента, а не всего документа.
Что касается использования препроцессора Sass, то это уже второстепенный вопрос. В итоге CSS будет использовать любые единицы измерения, которые указаны в Sass коде, и наследование будет работать таким же образом.
Я считаю, что это хороший метод для использования при создании CSS-фреймворка или библиотеки компонентов.
Этот метод убедительно доказывает, насколько мощным средством является единица измерения em в CSS.
ВЛВиктория Лебедеваавтор-переводчик статьи «The Power of em Units in CSS»
Изменение размеров элементов в CSS — Изучите веб-разработку
- Предыдущий
- Обзор: строительные блоки
- Следующий
В предыдущих уроках вы встречались с несколькими способами изменения размера элементов на веб-странице с помощью CSS. Важно понимать, насколько большими будут различные функции в вашем дизайне. Итак, в этом уроке мы обобщим различные способы получения элементов размера с помощью CSS и определим несколько терминов, касающихся размеров, которые помогут вам в будущем.
| Предпосылки: | Базовая компьютерная грамотность,
установлено базовое программное обеспечение, базовые знания
работа с файлами, основы HTML (изучение
Введение в HTML) и представление о том, как работает CSS (изучите
Первые шаги CSS. ) |
|---|---|
| Цель: | Чтобы понять, как мы можем изменять размеры объектов в CSS. |
HTML-элементы имеют естественный размер, установленный до того, как на них повлияет какой-либо CSS. Простой пример — изображение. Файл изображения содержит информацию о размерах, описанную как его внутренний размер . Этот размер определяется самим изображением , а не каким-либо форматированием, которое мы применяем.
Если вы поместите изображение на страницу и не измените его высоту или ширину, либо с помощью атрибутов тега , либо с помощью CSS, оно будет отображаться с использованием этого внутреннего размера. В примере мы поместили изображение под рамкой, чтобы вы могли видеть степень его размера, как определено в его файле.
Пустой В приведенном выше примере попробуйте добавить текст внутрь пустого элемента. Граница теперь содержит этот текст, потому что высота элемента определяется содержимым. Поэтому размер этого Конечно, мы можем придать элементам нашего дизайна определенный размер. Когда элементу присваивается размер (содержимое которого затем должно соответствовать этому размеру), мы называем его внешний размер . Возьмите наш Из-за этой проблемы переполнения, фиксация высоты элементов с помощью длины или процентов — это то, что нам нужно делать очень осторожно в Интернете. Во многих отношениях проценты действуют как единицы длины, и, как мы обсуждали в уроке о значениях и единицах, их часто можно использовать взаимозаменяемо с длинами. При использовании процента вам нужно знать, что это за процент от . В случае блока внутри другого контейнера, если вы зададите дочернему блоку ширину в процентах, это будет процент от ширины родительского контейнера. Это связано с тем, что проценты разрешаются в зависимости от размера содержащего блока. Без применения процентного соотношения наши Если вы установите Например, вы можете ожидать, что верхнее и нижнее поля в процентах будут выражаться в процентах от высоты элемента, а процентные значения левого и правого полей будут в процентах от ширины элемента. Однако, это не так! Когда вы используете поля и отступы, установленные в процентах, значение рассчитывается из встроенного размера содержащего блока — следовательно, ширина при работе на горизонтальном языке. В нашем примере все поля и отступы составляют 10% от ширины. Это означает, что вы можете иметь одинаковые поля и отступы по всему блоку. Это факт, который стоит помнить, если вы используете проценты таким образом. В дополнение к заданию фиксированного размера, мы можем попросить CSS указать элементу минимальный или максимальный размер. Если у вас есть ящик, который может содержать переменное количество контента, и вы всегда хотите, чтобы он был по крайней мере определенной высоты, вы можете установить для него свойство В приведенном ниже примере вы можете увидеть два поля, оба с определенным Это очень полезно для работы с переменным количеством контента, избегая при этом переполнения. Обычно параметр В качестве примера, если бы вы установили ширину Если вместо этого вы используете В приведенном ниже примере мы использовали одно и то же изображение три раза. Первому изображению присвоено Этот метод используется, чтобы сделать изображения отзывчивыми , чтобы при просмотре на меньшем устройстве они соответствующим образом уменьшались. Однако не следует использовать эту технику для загрузки очень больших изображений и последующего их уменьшения в браузере. Изображения должны быть соответствующего размера, чтобы они были не больше, чем они должны быть для самого большого размера, который они отображают в дизайне. Загрузка слишком больших изображений приведет к замедлению работы вашего сайта и может стоить пользователям дополнительных денег, если они используют лимитное соединение. Примечание: Узнайте больше о методах адаптивного изображения. Область просмотра — видимая область вашей страницы в браузере, который вы используете для просмотра сайта, — также имеет размер. В CSS у нас есть единицы, которые относятся к размеру окна просмотра — Если вы измените значения 
Это свернутая граница элемента — нет содержимого, которое удерживало бы ее открытой. В нашем примере ниже эта граница растягивается до ширины контейнера, потому что это элемент блочного уровня, поведение, которое должно стать для вас знакомым. У него нет высоты (или размера в измерении блока), потому что нет содержимого. width и height , и теперь он будет иметь этот размер независимо от того, какой контент в него помещен.
Как мы выяснили в предыдущем уроке о переполнении, заданная высота может привести к переполнению содержимого, если содержимого больше, чем помещается внутри элемента. Использование процентов
Поля и отступы в процентах
полей и отступов в процентах, вы можете заметить некоторое странное поведение. В приведенном ниже примере у нас есть коробка. Мы задали внутреннему блоку поле в размере 10% и отступ в размере 10%. Отступы и поля сверху и снизу поля имеют тот же размер, что и поля слева и справа.
min-height . Коробка всегда будет иметь по крайней мере эту высоту, но затем станет выше, если содержимого больше, чем в коробке есть место при минимальной высоте. min-height 150 пикселей. Коробка слева имеет высоту 150 пикселей; поле справа содержит контент, которому нужно больше места, поэтому его высота превышает 150 пикселей. max-width используется для уменьшения масштаба изображений, если не хватает места для их отображения с внутренней шириной, при этом следите за тем, чтобы они не превышали эту ширину.
: 100% для изображения, а его собственная ширина была бы меньше, чем его контейнер, изображение было бы вынуждено растянуться и стать больше, в результате чего оно выглядело бы пиксельным. max-width: 100% , а его внутренняя ширина меньше, чем его контейнер, изображение не будет вынуждено растягиваться и увеличиваться, что предотвратит пикселизацию. ширина: 100% и находится в контейнере, который больше его, поэтому растягивается до ширины контейнера. Второе изображение имеет максимальную ширину : на нем установлено 100% , и поэтому оно не растягивается, чтобы заполнить контейнер. Третий блок снова содержит то же изображение, также с максимальной шириной : 100% ; в этом случае вы можете увидеть, как он уменьшился, чтобы поместиться в поле.
vw для ширины окна просмотра и vh для высоты окна просмотра.
Используя эти единицы, вы можете изменить размер относительно области просмотра пользователя. 1vh равно 1% высоты области просмотра, а 1vw равно 1% ширины области просмотра. Вы можете использовать эти единицы измерения для размеров блоков, а также текста. В приведенном ниже примере у нас есть коробка размером 20vh и 20vw. В коробке лежит письмо A , которому присвоен размер шрифта размером 10vh. vh и vw , это изменит размер окна или шрифта; изменение размера области просмотра также изменит их размеры, поскольку они имеют размер относительно области просмотра. Чтобы увидеть изменение примера при изменении размера области просмотра, вам нужно будет загрузить пример в новом окне браузера, размер которого вы можете изменить (как встроенный