Глобальный размер шрифта с помощью 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:

html {
  font-size: 16px;
    
  @media screen and (min-width: 900px) {
    font-size: 18px;
  }
    
  @media screen and (min-width: 1200px) {
    font-size: 20px;
  }
}

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

h2 { 
  font-size: 2em;
}

pre {
  font-size: 0.8em;
}

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

.module {
  font-size: 1.1rem;
}

.another-module {
  font-size: 1.3rem;
}

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

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

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

Автор: Robin Rendle

Источник: https://css-tricks.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