От автора: у Richard Rutter есть довольно интересное руководство по настройке font-size: он утверждает, что необходимо использовать как rem, так и em единицы измерения в зависимости от отношений элементов на странице.
«Возьмем в качестве примера броскую цитату, состоящую из двух параграфов. Расстояние между параграфами будет зависеть от размера самих параграфов, т.е. это расстояние вполне можно задать через rem или em. Если в процессе проектирования вы решили увеличить размер цитаты, то и расстояние между параграфами должно быть увеличено. Т.е. расстояние между параграфами напрямую зависит от размера текста самих параграфов, и, следовательно, считается локальным внутри компонента. Следовательно, в данном случае необходимо использовать em.»
Данный подход дополняет описанный пару лет назад Крисом метод:
«Моя идея в следующем: на уровне документа сохраняется запись размеров в пикселях px, поэтому вы можете легко и эффективно менять размеры. Но тогда всем модулям на странице font-size должен быть в rem. Текстовые элементы (h1, h2, p, li и т.д.) задаются в em (если вы вообще задаете им размер), а, следовательно, они относятся к модулю.»
Разберем, что сказано выше: сначала мы задали font-size элементам документа в px:
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Узнать подробнее|
1 2 3 4 5 6 7 8 9 10 11 |
html { font-size: 16px; @media screen and (min-width: 900px) { font-size: 18px; } @media screen and (min-width: 1200px) { font-size: 20px; } } |
Затем мы стилизуем все текстовые элементы, такие как параграфы, заголовки и цитаты, с помощью em, так как они относятся к другим элементам:
|
1 2 3 4 5 6 7 |
h2 { font-size: 2em; } pre { font-size: 0.8em; } |
И в конце мы стилизуем модули, в которых находятся текстовые элементы, с помощью rem, чтобы легко настраивать все текстовые элементы внутри них:
|
1 2 3 4 5 6 7 |
.module { font-size: 1.1rem; } .another-module { font-size: 1.3rem; } |
… на практике мы получаем что-то наподобие этого:
Что это нам дает? Почему не использовать только rem или em, чтобы не усложнять процесс? В этом методе все модули становятся независимыми, что в будущем облегчит их стилизацию. Также мы можем быстро задать font-size любого модуля без изменения огромных частей кода. Если мы захотим увеличить font-size для всего сайта, нам нужно будет изменить всего одно значение.
Единицы измерения em и rem используются для достижения разных целей. Если использовать их по назначению, проект станет чуть-чуть более гибким, и с ним будет легче работать.
Автор: Robin Rendle
Источник: //css-tricks.com/
Редакция: Команда webformyself.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Узнать подробнее
