rem | WebReference
Единица rem соответствует значению свойства font-size корневого элемента <html>. Если rem добавляется непосредственно к font-size для <html> или стиль для <html> не задан, тогда 1rem принимается равным исходному значению font-size. В браузерах по умолчанию 1rem = 16px.
Пример
<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>rem</title> <style> html { font-size: 62.5%; } /* 10px */ body { font-size: 1.8rem; } /* 18px */ h2 { font-size: 2.8rem; } /* 28px */ </style> </head> <body> <h2>Почему возможна интроекция?</h2> <p>Как отмечает Д. Майерс, у нас есть некоторое чувство конфликта, которое возникает с ситуации несоответствия желаемого и действительного.</p> </body> </html>В данном примере размер шрифта для корневого элемента задан в процентах, в итоге получается равным 10px. Для размеров основного текста и заголовка применяется единица rem, которая считается относительно уже заданного размера html.
Спецификация
| Спецификация | Статус |
|---|---|
| CSS Values and Units Module Level 4 | Рабочий проект |
| CSS Values and Units Module Level 3 | Возможная рекомендация |
Каждая спецификация проходит несколько стадий одобрения.
- Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
- Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
- Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
- Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
- Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
- Draft (Черновик спецификации) — первая черновая версия стандарта.
Браузеры
| 9 | 12 | 4 | 11.6 | 4.1 | 3.6 |
| 2 | 4 | 12 | 4 |
В таблице браузеров применяются следующие обозначения.
- — элемент полностью поддерживается браузером;
- — элемент браузером не воспринимается и игнорируется;
- — при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.
Число указывает версию браузреа, начиная с которой элемент поддерживается.
См. также
Справочник CSS
Значения свойств
Функции
Единицы CSS
Типы элементов
Анимация
Границы
Контент
Логические
Отступы и поля
Печать
Позиционирование
Псевдоклассы
Псевдоэлементы
Размеры
Списки
Таблицы
Текст и шрифт
Флексы
Форматирование
Формы
Цвет и фон
rem, em — CSS — Дока
- Кратко
- Пример
- Как пишется
- Как понять
- Подсказки
- На практике
- Realetive советует
- Алёна Батицкая советует
Кратко
Скопировано
Задаёт размер относительно величины шрифта родительского элемента — em (от ephemeral unit — «относительная единица измерения») или корневого элемента <html> или <svg> — rem (от root ephemeral unit — «главная относительная единица»).
Пример
Скопировано
Пусть размер шрифта корневого элемента <html> будет равен 16 пикселям:
html { font-size: 16px;}
html {
font-size: 16px;
}
Тогда размер шрифта элемента с классом block будет равен 16px × 1,5 = 24px:
.block { font-size: 1.5rem;}
.block {
font-size: 1.5rem;
}
Значение в единицах em всегда рассчитывается от размера шрифта элемента: оно либо наследуется от родителя, либо задаётся на самом элементе. Продолжая наш пример, если элементу блока просто задать ширину 5em, то для расчёта будет использован унаследованный размер шрифта: 16px × 1,5 × 5 = 120px.
.block__elem { width: 5em;}
.block__elem {
width: 5em;
}
А если самому элементу задать размер шрифта 2em, то к унаследованному размеру добавится ещё один множитель: 16px × 1,5 × 5 × 2 = 240px.
.block__elem { width: 5em; font-size: 2em;}
.block__elem {
width: 5em;
font-size: 2em;
}
Как пишется
Скопировано
Как и все остальные единицы измерения в CSS — em и rem пишутся сразу после числового значения без пробела:
.selector { width: 10em;}.selector { margin: 5rem;}
.selector {
width: 10em;
}
.selector {
margin: 5rem;
}
Как понять
Скопировано
Единицы em и rem используют для вычисления размера шрифта, но применимы вычисленные значения для любых свойств, в которых указываются размеры: width, height, padding, margin, border и так далее.
Итоговое значение размера, заданное через em и rem, вычисляется динамически и меняется, когда значение, от которого вычислялось em и rem, изменится.
Подсказки
Скопировано
💡 Часто при работе с rem для селектора html пишется следующее CSS-правило:
html { font-size: 62.5%;}
html {
font-size: 62.5%;
}
Магическое число 62.5% равняется 10 пикселям при учёте, что стандартный размер шрифта браузера по умолчанию равен 16 пикселям. 16px = 100%, 10px = 62.5%.
Когда 1rem = 10px гораздо проще вести все расчёты при вёрстке.
На практике
Скопировано
Realetive советует
Скопировано
🛠 Если размер страницы был изменён глобально, то есть через настройки операционной системы или с помощью Ctrl + / Ctrl -, то значение шрифта у <html> также пропорционально изменится, даже если оно было задано явно. Такое масштабирование будет происходить более пропорционально, если при вёрстке вы сможете найти закономерности размеров элементов относительно размера шрифта.
Алёна Батицкая советует
Скопировано🛠 При помощи относительных единиц шрифта можно классно верстать адаптивные сайты. Например, если в мобильном и десктопном макетах пропорции одинаковые, и меняются только фактические размеры, то можно сделать, например, так:
html { /* 10px */ font-size: 62.5%;}.title-block { /* 10rem * 10px = 100px */ width: 10rem; /* 2rem * 10px = 20px */ font-size: 2rem;}@media (max-width: 640px) { html { /* 8px */ font-size: 50%; }}
html {
/* 10px */
font-size: 62.5%;
}
.title-block {
/* 10rem * 10px = 100px */
width: 10rem;
/* 2rem * 10px = 20px */
font-size: 2rem;
}
@media (max-width: 640px) {
html {
/* 8px */
font-size: 50%;
}
}
Без дополнительных правил ширина блока уменьшилась до 80px, а размер шрифта внутри до 16px.
Всего одним правилом мы масштабировали размеры блока и шрифта внутри него. Очень элегантное решение 😇
Если вы нашли ошибку, отправьте нам пул-реквест!
Попробуйте ещё раз?←
vw, vh, vmin, vmax
ctrl + alt + ←
→
CSS-анимации
ctrl + alt + →
Что такое Бэр? (и как их использовать в CSS)
Из многих вариантов стилей HTML, которые поддерживает CSS, размер шрифта является важным свойством, особенно когда речь идет об отзывчивости дисплея. Кроме того, есть несколько способов задать размер шрифта с помощью CSS. Из них единицы rem оказались исключительно гибкими и относительно интуитивными.
Rem (сокращение от «root-em») Единицы определяют размер шрифта элемента относительно размера корневого элемента. По умолчанию большинство браузеров используют значение размера шрифта 16px. Таким образом, если корневой элемент имеет размер 16 пикселей, элемент со значением 1rem также будет равно 16px.
Поэтому единицы rem полезны для масштабирования элементов CSS по отношению к размеру корневого элемента, даже если вы не знаете, какой будет размер шрифта по умолчанию.
В этой статье мы рассмотрим, что такое единицы rem и как их эффективно использовать для ваших нужд в стиле.
Что такое CSS?
Для адаптивных веб-страниц размер веб-элементов изменяется в зависимости от размера области просмотра. CSS позволяет вам объявлять размер шрифта, используя абсолютные единицы, такие как пиксели (px), или относительные единицы, такие как проценты, em или единицы rem.
Поскольку пиксели являются абсолютными единицами измерения, они не масштабируются вместе с окном просмотра. Таким образом, 1px представляет собой одну единицу на физическом устройстве, независимо от размера устройства. В результате создание адаптивных веб-сайтов часто проще с использованием относительных единиц, таких как проценты, em или бэр.
Проценты относятся к родительскому элементу или свойству в этом элементе.
Они обычно используются для установки ширины и высоты элемента.
Единицы Em относятся конкретно к родительскому элементу, позволяя элементу масштабироваться в контексте родителя. Рассмотрим p тег, вложенный в элемент article с размером шрифта 18 пикселей:
.article {font-size: 18px;
}
p {
размер шрифта: 2em;
/* устанавливает размер шрифта = 36px */
}
Присвоение элементу p размера шрифта 2em приводит к фактическому размеру шрифта 36px — вдвое больше значения элемента article 90.
Что такое rem CSS?
Подобно единицам em, бэры являются относительными единицами. Однако они ссылаются на корневой элемент — обычно это сам элемент HTML . Большинство браузеров устанавливают размер шрифта по умолчанию равным 16px. Однако вы можете изменить это. Например, чтобы изменить размер шрифта на 14 пикселей, добавьте в свою таблицу стилей следующее:
html {font-size: 14px
}
После того, как вы установите размер элемента HTML, вы можете указать размеры всех других элементов, которые используют единицы rem, в процентах от этого размера (выраженные в виде десятичной дроби).
Например, предположив, что размер шрифта по умолчанию для корневого объекта составляет 16 пикселей, вы должны оформить абзац с размером шрифта 12 пикселей, используя 0,75rem , потому что 12 ÷ 16 = 0,75:
p {font-size : 0,75 бэр;
}
Выполнение этих вычислений каждый раз, когда вы хотите преобразовать рем в пиксели, может довольно быстро разочаровать. Рассмотрим следующие значения, полученные путем преобразования 14px, 18px и 20px в бэр-единицы:
- 14 пикселей = 0,875 бэр
- 18 пикселей = 1,125 бэр
- 20 пикселей = 1,25 бэр
Эти значения нелегко запомнить, и вам, возможно, придется выуживать свой калькулятор чаще, чем вам хотелось бы, чтобы подтвердить их.
К счастью, трюк с 62,5% призван решить эти проблемы. При установке размера корневого шрифта на 62,5% от его значения по умолчанию эталонное значение обычно становится 10 пикселей, что делает указанные выше значения равными 1,4 rem, 1,8 rem и 2,0 rem соответственно.
Но зачем устанавливать размер основного шрифта 62,5 % вместо 10 пикселей?
Одним из основных преимуществ относительных единиц является их масштабируемость независимо от физического размера дисплея. Изменение корневого значения с использованием абсолютной единицы означает, что содержимое будет трудно читать или перемещаться по нему. Трюк 62,5% гарантирует, что разработчики могут легко масштабировать значения, не беспокоясь о типе устройства, используемого для просмотра контента.
Реализация трюка 62,5% в вашем CSS будет выглядеть следующим образом:
html {font-size: 62,5%;
/* изменяет размер шрифта 16px по умолчанию на 10px */
}
h2 {
font-size: 2.4rem;
/* размер шрифта = 24 пикселя */
}
h3 {
font-size: 1.6rem;
/* размер шрифта = 16 пикселей */
}
p {
font-size: 1.2rem;
/* размер шрифта = 12 пикселей */
}
Как видите, расчет рем-единиц с использованием базы 10 пикселей упрощает задачу.
Однако есть шанс, что трюк с 62,5% может увеличить вашу рабочую нагрузку. Если ваше тело должно иметь размер 12 пикселей, вам в конечном итоге придется установить размер шрифта для большинства модулей или элементов на 12 пикселей. В этом случае вы могли бы вместо этого установить размер тела на 12 пикселей. Так что имейте это в виду при использовании этого трюка.
Использование Rem в медиа-запросах
Спецификация медиа-запросов утверждает, что медиа-запросы (почти) всегда независимы от каких-либо внутренних стилей в документе.
Таким образом, единицы rem, используемые в медиа-запросах, зависят от размера браузера по умолчанию или размера, установленного пользователем в настройках браузера, а не от размера, указанного в таблице стилей.
Это означает, что трюк с 62,5% не работает в блоке медиа-запроса, и 1rem внутри будет равен 16px или значению, указанному пользователем.
Возьмем этот пример с точкой останова мультимедиа 32rem :
html {font-size: 62,5%;
/* размер шрифта: 10 пикселей */
}
h2 {
размер шрифта: 2.4rem;
/* font-size: 24px */
}
@media (width <= 32rem) {
h2 {
font-size: 2rem;
}
}
Точкой останова здесь будет не 32 × 10 пикселей = 320 пикселей, а 32 × 16 пикселей = 512 пикселей.
Почему вы должны использовать единицы rem?
Как упоминалось ранее, единицы rem относятся к размеру корневого элемента. Поскольку пользователь может установить размер этого элемента по умолчанию в настройках своего браузера, веб-страница может масштабироваться в соответствии с предпочтениями пользователя.
Однако использование абсолютных единиц измерения, таких как пиксели, создает барьеры доступности.
Пиксели переопределяют размер корневого шрифта документа, то есть предпочтения пользователя игнорируются. Поэтому по возможности используйте единицы rem для любых масштабируемых элементов.
Rem Единицы и проценты
Проценты обычно лучше всего использовать для определения ширины элементов, поскольку они обеспечивают более гибкое решение, чем единицы rem. Это особенно верно в макете с несколькими столбцами. Установка ширины столбцов в процентах гарантирует, что они всегда масштабируются с размером области просмотра.
Например, в макете с двумя столбцами можно использовать проценты для разделения контейнера:
.column1 {ширина: 75%;
}
.column2 {
ширина: 25%;
}
Это позволяет масштабировать столбцы пропорционально размеру области просмотра.
Единицы Rem и Em
В то время как единицы rem относятся к корневому элементу, em относятся к родительскому элементу.
Чтобы проиллюстрировать, как это работает, рассмотрите размеры родительского и дочернего шрифтов, показанные ниже.
Размер родителя указан в пикселях, а размер дочернего элемента — в единицах em.
.parent {размер шрифта: 18 пикселей;
}
.child {
размер шрифта: 2em;
/* размер шрифта: 36 пикселей */
}
Фактический размер шрифта ребенка составляет 2 × 18 пикселей = 32 пикселя.
Если для родительского элемента не задан размер шрифта, em будет проверять следующий родительский элемент в дереве DOM — вплоть до корневого элемента — до тех пор, пока не найдет единицу измерения для ссылки.
Когда em используется для значений измерения, отличных от размера шрифта, его значение получается из размера шрифта этого элемента. Вот пример h2 с использованием единиц em, вложенных в div element:
div {font-size: 12px;
}
h2 {
размер шрифта: 2em;
набивка: 1,5 см;
}
Здесь размер шрифта h2 составляет 24 пикселя (2 × 12 пикселей).
Затем значение отступа рассчитывается из этого значения как 1,5 × 24 пикселей = 36 пикселей.
Проблема с em заключается в том, что размер шрифта увеличивается при вложении элементов.
Возьмем этот пример вложенного списка, оформленного с помощью CSS:
- Чай (60px)
- Черный чай (120px)
- Зеленый чай (120px
0003
Вместо этого выберите rems, ems и проценты. Используйте единицы rem для создания элементов, которые масштабируются в зависимости от пользовательских настроек, и единицы em для элементов, которые должны масштабироваться в зависимости от их родительских элементов. Для создания гибких макетов используйте проценты.
Если бы вы тогда изменили это на 
д., минимальный размер отсутствует.
В остальном это не так важно.
