Что такое rem в css

Rem — масштабируемые единицы измерения

Статья написана в далеком 2011 году одним товарищем по имени Jonathan Snook.

Статейка мне понравилась и пришлась в пору — мне как раз нужно было ознакомиться с вопросом масштабируемого размера шрифта и возможности единообразного задания его размера для всего документа.

Материальчик понравился и я решил, что я лучше не смогу его написать, чем как просто перевести. Вопрос хорошо освещен — кратко и по делу, с необходимыми примерами.

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

Размер шрифта в rem

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

Наиболее популярны два метода определения размера шрифта:

  • размер шрифта в пикселях px
  • размер шрифта в em

Давайте сделаем краткий обзор обоих методов, прежде чем я представлю еще один — волшебный третий способ.

Размер шрифта в px

С самого первого дня, когда зародился Интернет, мы (веб-мастера) использовали пиксели для задания размеров текста. Это надежный и понятный способ.

К сожалению, пользователи Internet Explorer — даже IE9 — не имеют возможности изменять размер текста, используя для этого встроенную функцию браузера.

Для веб-мастеров, которые озабочены такой возможностью, это большая проблема. Последние свежие версии браузера IE имеют встроенную функцию масштабирования, которая увеличивает размер ВСЕГО на странице — эта возможность присутствует во всех остальных браузерах, поддерживающих веб-стандарты. Это несколько сглаживает недостатки браузеров и данного метода, в частности.

Исходя из своего личного опыта, могу сказать, что использование пикселей предоставляет для меня надежную структуру будущего сайта. Пользователи браузеров имеют достаточно средств, чтобы подстроить сайт под свои предпочтения. Но я отвлекся от темы. Что еще у нас есть в наличии?

Размер шрифта в em

Невозможность изменения размеров текста в браузере IE постоянно вызывало чувство разочарования у веб-разработчиков. Чтобы обойти эту проблему, можно использовать единицы измерения em .

Впервые об этом способе написал в далеком 2004-м году Richard Rutter в своей статье How to size text using ems.

Этот способ основан на задании основного размера шрифта для body в процентах. В этом случае 1em равен 10px , вместо 16px по-умолчанию.

Теперь, чтобы установить размер шрифта для элемента страницы в единицах, эквивалентных 14px , нужно установить его в 1.4em :

Проблема с размерами шрифта в em заключается в том, что такая система достаточно сложна при применении ее на практике. В примере, приведенном выше, размер шрифта элемента li равен не 14px, а 20px.

Если добавить еще один вложенный уровень, то размер шрифта будет 27px! Происходит это вследствие наследования свойств в CSS-таблицах.

Чтобы избежать такого эффекта, нужно явно прописать для каждого дочернего элемента размер шрифта в 1em:

Проблема наследования при системе задания размеров шрифта в em достаточно неудобна. Что же можно еще предложить для решения проблемы?

Размер шрифта в rem

Стандарт CSS3 вводит в обиход несколько новых единиц измерения, одной из которых является rem , что является сокращением от “root em”. Давайте немного разберемся, что из себя представляет эта единица измерения.

Единица измерения em является относительной к размеру шрифта элемента родителя, что приводит к эффекту наследования. Единица измерения rem является относительной к основному корневому элементу, то есть к html.

Это означает, что можно установить размер шрифта только один раз, для элемента html. Для всех остальных элементов, которые являются потомками этого элемента, достаточно установить размер шрифта в процентах ( rem ) относительно корневого элемента:

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

Но как насчет скудной поддержки этой единицы измерения в браузерах?

Вы будете сильно удивлены, но поддержка rem в браузерах достойная: Safari 5, Chrome, Firefox 3.6+ и даже Internet Explorer 9. Хорошая новость заключается в том, что в IE9 поддерживается изменение размера текста, установленного в единицах измерения rem . Увы, бедная Opera (вплоть до версии 11.10, по крайней мере), не имеет поддержки единиц измерения rem .

Как же нам поступить с браузерами, которые не поддерживают единицы измерения rem ? Для них мы можем выполнить откат fallback в виде пикселей px . То есть, мы одновременно будем задавать размер шрифта в px и в rem :

И пожалуйста, теперь мы имеем прочную и предсказуемую структуру во всех браузерах.

Декабрь 13 2011 — Opera 11.60 теперь поддерживает единицы измерения rem .

Конец статьи и перевода. В дополнение я могу сказать, что на сайте CSS Tricks также есть интересный материал по поводу rem .

В частности, на нем приведены удобные mixin ‘ы для SASS, с помощью которых можно быстро задать размер шрифта в rem (с fallback в px ):

Пример использования этого SASS-mixin’а:

… что при компиляции в CSS будет выглядеть следующим образом:

И еще несколько разновидностей SASS-mixin’ов, которые могут пригодиться. Подмешивания используются для задания размера шрифта и интерлиньяжа (высоты строки):

А здесь представлен “полный” mixin , с помощью которого можно одновременно задать кегль и line-height . Удобная штучка — можно задать только размер шрифта и получить на выходе интерлиньяж и кегль в пикселях (и rem ‘ах):

Постепенно изучаю вопрос создания тем под WordPress. Скачал версию 3.7.1, установил под локальный сервер XAMPP и открыл файл style.css стандартной темы “Twenty Twelve”. И в заголовке этого файла сразу же наткнулся на следующие интересные строки:

То есть, что нам сообщают разработчики WordPress в этих строках? Что данный файл стилевых правил использует для построения дизайна сайта два значения в качестве переменных:

… в единицах измерения rem с откатом fallback в пиксели px . И далее приводятся примеры того, как применяются обе эти переменные для построения стилевых правил и как производится вычисление нужных величин, являющихся производными от этих переменных.

В самом конце две ссылки по тематике rem для любознательных, первой из которых является вольный перевод, который вы читаете! Значит, я на правильном пути.

TypeScript — размеченные объединения

> Пользовательское объединение типов — что это и как можно использоватьПомимо объединения **примитивных** типов данных (например):<% high. … Continue reading

Когда в CSS использовать rem, em, px, или что-то другое

Использование только px (пикселей) для CSS-размеров шрифта, контейнеров, отступов, позиционирования и пр. &#8212; путь простой, но тупиковый.

  • % , fr и flex-grow &#8212; эти единицы измерения лучше использовать для установки размеров контейнерам
  • px лучше использовать для установки размеров декоративных элементов, например, border
  • для определения высоты строки ( line-height ) лучше вообще не использовать единицы измерения и оставить только число
  • rem &#8212; для всего остального: размеров шрифта, полей, отступов, минимальной ширины и точек @media

Что такое rem?

rem (как и em ) относительная единица измерения. em может быть немного сложным в использовании, поэтому часто лучше придерживаться rem . Вот как rem работает:

  • rem &#8212; это единица измерения, относительно размеров корневого элемента («r» в rem означает: root).
  • Допустим, браузер считает базовый размер шрифта 16px . Этот размер указан для корневого элемента (он же элемент html )

Таким образом, если нужно, чтобы какой-то размер был эквивалентен 14px , достаточно посчитать его отношение к базовому размеру: 14/16 = 0.875rem .

Почему rem?

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

Таким образом, rem можно использовать практически для всех случаев. Например, для: font-size , margin , padding , min-width и т.д.

Есть ли у rem какие-либо недостатки?

Использование rem в медиа-запросах (@media), для минимальной или максимальной ширины, может быть проблематичным из-за того, что браузеры использует разные методы округления дробных чисел.

Но настоящий недостаток, это неинформативность дробных относительных значений и необходимость их пересчета, чтобы осознать размер в привычных пикселях. Например, при просмотре кода не очевидно, что min-width: 18.75rem это &#8212; 300px из макета. Немного поправить эту проблему можно, реализуя в препроцессоре функцию, которая будет выполнять вычисления и поможет прояснить, что происходит. В SCSS это может быть так:

Когда использовать px?

Чем реже &#8212; тем лучше. Пиксели следует использовать, когда размеры являются декоративными и/или не нуждаются в масштабировании относительно, предпочитаемого пользователем, размера шрифта. Отличный вариант использования px &#8212; границы (border). Чаще всего нет необходимости масштабировать их относительно размеров шрифта.

Как насчет %, fr, flex-grow?

Контейнерные элементы &#8212; это те, которые содержат контент. Это прямоугольники, которые содержат текст, изображения и другие элементы контейнера. Они обычно нуждаются в указании размеров и расположения. Размеры контейнерных элементов следует указывать с использованием относительных значений: проценты, fr (для CSS grid) или flex-grow (для flexbox). Это гарантирует, что элемент контейнера будет изменять свои размеры относительно размеров окна браузера.

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

Когда единицы измерения можно не указывать?

Из всего сказанного до сих пор, есть одно исключение: line-height (высота строки).

Лучше определять значение line-height относительно размера шрифта элемента font-size . Сделать это можно полным отсутствием единиц измерения. Например, если нужно, чтобы font-size составлял 14 пикселей, а line-height 20 пикселей, посчитать можно так:

Единицы измерения em, rem, vh, vw, vmin, vmax

Единицы измерения em, rem, vh, vw, vmin, vmax

Сегодня мы рассмотрим редко используемые начинающими верстальщиками, относительные единицы измерения в CSS3, такие как, em, rem, vh, vw, vmin, vmax. В основном новичкам более понятны устоявшиеся и стабильные, пиксели и проценты. Но стоит ли, избегать относительно новые единицы измерения?

Единица измерения em

1em равен текущему размеру шрифта относительно родителя. Если у родителя не указан размер шрифта в пикселях, то 1em равен приблизительно 16 пикселям. Однако, если мы укажем другой размер шрифта, например 18 пикселей, то для дочернего элемента, 1em, уже будет равен 18 пикселям.

h2 <
font-size: 2em; <!— размер заголовка 36px —>
>

span <
font-size: 1em; <!— размер текста 18px —>
>

Преимуществом использования em, состоит в том, что можно очень быстро поменять размеры шрифта во всем документе, поменяв размер шрифта в теге body. Но надо учитывать, что вложенный элемент, унаследует размер шрифта не у тега body, а у своего родителя.

Единица измерения rem

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

h3 <
font-size: 2rem; <!— размер заголовка 28px —>
>

.text <
font-size: 1em; <!— размер текста 14px —>
>

Допустим мы хотим увеличить размер шрифта во всем документе, меняем, только значение у font-size, автоматически пиксели пересчитаются и у всех остальных элементов. Это очень удобно, такой фокус нельзя применить, например к процентам. А казалось бы, какая разница, ведь процент тоже относительная единица измерения.

h3 <
font-size: 2rem; <!— размер заголовка 40px —>
>

Единицы измерения vh, vw

Эти единицы были созданы для определения размеров элементов, относительно высоты и ширины окна браузера, в первую очередь на мобильных устройствах. При изменение размера экрана, элементы с заданными размерами в vh/vw, автоматически масштабируются.

Этот контейнер растянется на всю ширину и высоту браузера, независимо от размеров экрана.

.container <
width: 100vw;
height: 100vh;
>
1vh составляет 1% от высоты окна
1vw составляет 1% от ширины окна

Вы спросите: Разве размеры в %, не делают тоже самое, в чем разница? Проценты определяются относительно родительского элемента. А что будет, если у родителя не заданы размеры?

У body, размеры не заданы. В таком случае, дочернему блок child, не от чего рассчитывать свои размеры и он не сможет отобразиться на странице. А теперь заменим проценты на vw, vh и блок child займет половину окна просмотра по высоте и ширине.

Единицы измерения vmin, vmax

vmin – наименьшее из (vw, vh)
vmax – наибольшее из (vw, vh)

Как это работает?

1vmin равен 0.01 от ширины или высоты окна браузера, в зависимости от того, которая из этих двух величин меньше. Например ширина окна смартфона, меньше его высоты. Это значит, что vmin будет рассчитываться относительно ширины.

Зададим ширину и высоту контейнера. Область просмотра не будет выходить за пределы окна смартфона, горизонтальная прокрутка не появится.

.container <
width: 100vmin;
height: 100vmin;
>

vmax работает прямо противоположно, рассчитывается относительно большей стороны.

Практическое применение vmin, vmax

При масштабировании шрифтов (размеры шрифта заданы в vw, vh), всегда существует опасность, что текст станет слишком крупным или наоборот мелким. Нам нужно больше контроля над размерами, что-то максимальное и минимальное.

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

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