Глобальный размер шрифта с помощью rem; локальный размер шрифта с помощью em

Глобальный размер шрифта с помощью rem; локальный размер шрифта с помощью em

От автора: у Richard Rutter есть довольно интересное руководство по настройке font-size: он утверждает, что необходимо использовать как rem, так и em единицы измерения в зависимости от отношений элементов на странице.

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

Данный подход дополняет описанный пару лет назад Крисом метод:

«Моя идея в следующем: на уровне документа сохраняется запись размеров в пикселях px, поэтому вы можете легко и эффективно менять размеры. Но тогда всем модулям на странице font-size должен быть в rem. Текстовые элементы (h1, h2, p, li и т.д.) задаются в em (если вы вообще задаете им размер), а, следовательно, они относятся к модулю.»

Разберем, что сказано выше: сначала мы задали font-size элементам документа в px:

Затем мы стилизуем все текстовые элементы, такие как параграфы, заголовки и цитаты, с помощью em, так как они относятся к другим элементам:

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

… на практике мы получаем что-то наподобие этого:

Что это нам дает? Почему не использовать только rem или em, чтобы не усложнять процесс? В этом методе все модули становятся независимыми, что в будущем облегчит их стилизацию. Также мы можем быстро задать font-size любого модуля без изменения огромных частей кода. Если мы захотим увеличить font-size для всего сайта, нам нужно будет изменить всего одно значение.

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

Автор: Robin Rendle

Источник: //css-tricks.com/

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

Метки:

Похожие статьи:

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