Понимание и использование rem Units в CSS

Используя приблизительную оценку 1rem = 1 символ, мы можем управлять потоком текста для одного столбца контента в подходе, ориентированном на мобильные устройства:

 .container {
width: 100%;
}

@media (min-width: 85rem) {
.container {
width: 65rem;
}
}

Однако есть одна интересная деталь о единицах rem и em при использовании в качестве единиц для медиазапросов: они всегда сохраняют одно и то же значение 1rem = 1em = размер шрифта, установленный браузером. Причина такого поведения объясняется в спецификации медиа-запроса (выделение добавлено):

Относительные единицы в медиазапросах основаны на начальном значении, что означает, что единицы никогда не основаны на результатах объявлений. Например, в HTML единица em относится к начальному значению размера шрифта, определяемого пользовательским агентом или настройками пользователя, а не к каким-либо стилям на странице .

Давайте посмотрим быстрый пример такого поведения:

Посмотреть демонстрацию медиа-запросов на CodePen

Во-первых, в нашем HTML у нас есть элемент <span>

 Document width: <span></span>px

Далее у нас есть два медиазапроса, один с блоками rem, а другой с em (для простоты используется Sass):

 html {
font-size: 62.5%; /* 62.5% of 16px = 10px */

@media (min-width: 20rem) {
/* 20*16px = 320px */
background-color: lemonchiffon;
font-size: 200%;
/* 200% of 16px = 32px */
}

@media (min-width: 30em) {
/* 30*16px = 480px */
background-color: lightblue;
font-size: 300%; /* 300% of 16px = 48px */
}
}

Наконец, мы используем немного jQuery для отображения ширины области просмотра на странице, обновляя значение при изменении размера окна:

 $('span').text($(window).width());

$(window).on('resize', function(e) {
$('span').text($(window).width());
});

Мы начнем с трюка с 62,5%, чтобы показать, что измененный размер корневого шрифта не влияет на значения, используемые для медиазапросов. Изменяя ширину окна браузера, мы можем видеть, что первый медиа-запрос начинает работать с 320px (20 × 16px), а второй становится активным с 480px (30 × 16px). Ни одно из объявленных нами изменений font-size Единственный способ изменить значения точки останова медиазапроса — изменить размер шрифта по умолчанию в настройках браузера.

По этой причине не имеет значения, используем ли мы единицы em или rem для точек останова медиазапроса. Zurb Foundation (в настоящее время v6.5.3 на момент написания этой статьи) использует единицы em в медиазапросах.

В поисках доступности

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

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

Использование модулей Rem для масштабирования документов

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

Использование rem Units для масштабирования документов Demo # 1

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

Давайте посмотрим на другое: