rem в CSS. Общие сведения и способы применения

rem в CSS. Общие сведения и способы применения

От автора: сегодня мы рассмотрим еще один тип единиц измерения rem в css. Данный тип отлично поддерживается браузерами и полифиллами в случае со старыми обозревателями.

Описание

Единицы измерения rem в CSS что это? Если вы любитель музыки, то должно быть сталкивались с группой «REM». Но в отличие от своих коллег «Rapid Eye Movement» наш rem расшифровывается, как «root em». Данный тип единиц измерения создан для гармонии и баланса с дизайном. Определение одной единицы rem на W3C:

Равная вычисленному значению свойства font-size для основного текста. Если свойство font-size установлено для основного текста, то rem единицы связываются с этим свойством.

Это значит, что 1rem равен размеру текста для тега html (в большинстве браузеров по умолчанию это 16px).

Rem против Em

Основная загвоздка с em в том, что они определяются по размеру текста конкретного элемента. Кроме того, они наследуются, что приводит к непредсказуемым последствиям. Рассмотрим следующий пример. Списки будут иметь шрифт 12px, а основной текст 16px:

html {
  font-size: 100%;
}

ul {
  font-size: 0.75em;
}

Если наш список вложен в другой список, размер шрифта внутреннего будет составлять 75% от родителя, т.е. 9px. Можно исправить это так:

ul ul {
  font-size: 1em;
}

Это решает проблему, однако не стоит забывать о более глубоком наследовании. С rem все намного проще:

html {
  font-size: 100%;
}

ul {
  font-size: 0.75rem;
}

Так как все размеры шрифтов определяются по корневому тексту, нам не нужно следить за всевозможными случаями вложенности.

Размер текста в Rem

Jonathan Snook в своей статье Размер текста в Rem в мае 2011 г. был одним из первопроходцев в применении данных единиц измерения к шрифтам. Как и множество других CSS разработчиков, он столкнулся с проблемой с em единицами в сложных макетах.

В то время IE еще занимал большую долю рынка, и разработчики не могли масштабировать текст, так как он был в пикселях. И как мы уже видели выше, очень легко не уследить за всевозможными наследованиями и получить неожиданные результаты.

Основная проблема rem для шрифтов в том, что данные единицы довольно сложно применить. Ниже я составил краткий список основных размеров шрифтов в rem единицах, при условии, что по умолчанию стоит 16px:

10px = 0.625rem

12px = 0.75rem

14px = 0.875rem

16px = 1rem (base)

18px = 1.125rem

20px = 1.25rem

24px = 1.5rem

30px = 1.875rem

32px = 2rem

Как видно, данные значение неудобны при вычислениях. По этой причине Snook использовали трюк под названием «62,5%». Это старый трюк, его уже применяли с em единицами:

body { font-size:62.5%; }  /* =10px */
h1   { font-size: 2.4em; } /* =24px */
p    { font-size: 1.4em; } /* =14px */
li   { font-size: 1.4em; } /* =14px? */

Так как rem связаны с корневым текстом, то вариант от Snook выглядит так:

html { font-size: 62.5%; }  /* =10px */
body { font-size: 1.4rem; } /* =14px */
h1   { font-size: 2.4rem; } /* =24px */

Но стоит учесть и те браузеры, которые не поддерживают данные единицы измерения. Для них мы изменим наш код на такой:

html {
    font-size: 62.5%;
}

body {
    font-size: 14px;
    font-size: 1.4rem;
}

h1 {
    font-size: 24px;
    font-size: 2.4rem;
}

С виду данное решение может показаться идеальным, однако есть разработчики, которые остерегают от бездумного использования данного подхода. Harry Roberts написал свою статью по поводу применения rem единиц. По его мнению, хоть правило 62,5% и облегчает вычисления, в итоге оно заставляет разработчиков переписывать абсолютно все размеры шрифтов на их сайте.

Третий способ подсказал Chris Coyier на сайте CSS-Tricks. Он использует все три типа единиц измерения. Корневой текст он оставляет в px, модули в rem, а элементы модулей в em. Данный подход облегчает манипулирование размерами основного текста. На основе корневого текста вычисляется размер модулей, а по размеру модулей вычисляется размер шрифта для текста в модулях. Louis Lazaris обсуждала этот последний способ в статье Мощь em единиц измерения в CSS. В примере ниже можно увидеть, как работает последний способ:

Как видно, панацеи не существует. Комбинация различных способов ограничивается только воображением разработчиков.

Rem и медиа запросы

Использование em или rem в медиа запросах сводится к понятию «оптимальная длинна строки», и как она влияет на пользователей. В 2014 году веб-сайт Smashing Magazine опубликовал статью с комплексным исследованием типографики под названием Размер имеет значение: оптимальная длинна строки и размер шрифта в адаптивном веб-дизайне. В статье много интересного, в том числе была вычислена оптимальная длина строки: от 45 до 75-85 символов (включая пробелы и знаки препинания). Идеальное значение строки – 65 символов.

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

.container {
  width: 100%;
}

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

Есть одна интересная деталь при использовании rem и em в медиа запросах: все они имеют одно значение 1rem = 1em = размер браузера по умолчанию. Объяснение можно найти в спецификации media query:

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

Посмотрите демо на CodePen

Сперва создадим span, в нем будем писать ширину экрана: Document width: 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 = 30px */
  }
}

Добавим чуть-чуть JQuery для отображения размера экрана, обновляем значение при изменении размера окна:

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

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

Сначала мы показали, что правило 62,5% не работает для шрифтов в медиа запросах. При изменении ширины окна браузера, мы видим, как первый медиа запрос перестает работать на 320px (20x16px), а второй начинает на 480px (30x16px). Размер шрифта не меняется, на объявленные нами в стилях при изменении размера окна. Единственный способ это изменить в настройках браузера.

По этой причине не имеет значения, используем мы em или rem в медиа запросах. В таких проектах, как Foundation v5 и Bootstrap v4 alpha в медиа запросах используются em единицы.

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

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

Демо №1

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

Еще один пример:

Во втором примере мы делаем то же самое но с помощью JS. В этом примере пользователю предоставлена возможность настройки размера интерфейса. Напишите метод для сбора данных о размерах экранов пользователей (хранить можно в БД, куки или на съемном носителе), и вы будете знать о предпочтениях ваших пользователей.

Заключение

Заканчиваем наш урок по rem в CSS. Нет нужды объяснять все преимущества данных единиц измерения: адаптивность, масштабируемость, удобство при чтении и большая гибкость. Однако rem не панацея. При правильном применении они могут решить множество проблем, которые раздражали разработчиков много лет. Каждый из нас может создать свой подход. Открывайте текстовые редакторы, экспериментируйте и делитесь результатами в комментариях.

Автор: Adrian Sandu

Источник: http://www.sitepoint.com/

Редакция: Команда webformyself.

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки:

Комментарии Вконтакте:

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

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

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

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree