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

Проблемы единиц измерения em

Единица измерения em полностью независимая: это буквально размер текущего выбранного текста. Самая большая проблема с этой единицей измерения, которой никак не избежать, -  увеличение в размере вложенных элементов. Например, применяя следующий код CSS:

p, ul, li { font-size: 1.4em; }

Вы, возможно, ожидаете, что шрифт в абзацах будет того же размера, что и у элементов пунктов списка, не зависимо от контекста, в котором они находятся, но если код CSS выше применяется к следующей разметке:

<p>Lorem ipsum…
<ul>
        <li>Dolor sit…
        <li><p>Callum est…
</ul>

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

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

Решение проблемы с помощью единиц измерения rem

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

html { font-size: 62.5%; }
p, li { font-size: 1.6rem; }

Задание размера тегу html делает 1rem близким по размеру к 10px, что позволяет веб-дизайнеру легко переключаться между знакомыми значениями.

Если Вам нужна поддержка единицы измерения rem в очень старых версиях браузеров, таких как Internet Explorer версии 8 и более ранних, то можно воспользоваться небольшим скриптом, написанным Chuck Carpenter, который пересчитывает rem в коде CSS в пиксели для браузеров, которые не поддерживают эту единицу измерения.

Дополнительная информация: на сайте CSS Tricks есть отличная статья, написанная Roman Rudenko, об использовании единиц измерения rem не только для задания размера шрифта. Хотя можно поспорить с некоторыми выводами, но Jeremy Church сделал очень хорошее сравнение единиц измерения rem и em.

Автор урока Dudley Storey

Перевод — Дежурка

Смотрите также:

• Использование селекторов псевдоклассов
• Использование контекстного селектора и селектора прямого потомка в CSS
• Использование блочных и строчных элементов