Статьи

Краткий совет AtoZ CSS: преимущества rem и em

Август 27, 2018

Эта статья является частью нашей серии CSS AtoZ. Вы можете найти другие записи серии здесь .
Вы можете просмотреть полную транскрипцию и скринкаст для соответствующего видео о псевдоклассе :requiredздесь .

Добро пожаловать в нашу серию AtoZ CSS! В этой серии я буду изучать различные значения CSS (и свойства), каждое из которых начинается с другой буквы алфавита. Мы знаем, что иногда скринкастов недостаточно, поэтому в этой статье мы добавили краткие советы по использованию значений remem

R2-01

R для remem

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

Несмотря на то, что формы, валидация и состояние стиля являются важными темами, мы не особо затронули тему :required Итак, давайте посмотрим на пару быстрых советов по использованию единицы измерения rem Но сначала давайте рассмотрим другой тип относительной единицы: em

Плюсы и минусы использования em

При работе над адаптивным проектом более гибко использовать относительные единицы измерения, такие как em Это связано с тем, что эта единица измерения относится к размеру шрифта родительского элемента, что позволяет пропорционально увеличивать размер элемента, интервал и текстовое содержимое при изменении font-size

Использование этих относительных единиц позволяет построить систему пропорций, в которой изменение значений font-size Система пропорций — это хорошо, но такое поведение em

Возьмите следующий фрагмент HTML: 

 <ul> 
  <li>lorem ipsum</li> 
  <li>dolor sit 
   <ol> 
    <li>lorem ipsum</li> 
    <li>lorem ipsum</li> 
    <li>lorem ipsum</li> 
    <li>lorem ipsum</li> 
   </ol> 
 </li> 
</ul>

Этот вложенный список — не самая распространенная вещь в мире, но он может появиться на странице условий или в каком-либо другом формальном документе.

Если бы мы хотели, чтобы элементы списка выделялись, мы могли бы установить их font-size16px 

 li {
  font-size: 1.5em; /* 24px/16px */
}

Но это вызовет проблему с вложенным li Вложенные элементы будут в 1,5 раза больше 24px16px В результате все вложенные элементы списка будут расти экспоненциально с каждым уровнем вложенности. Это, вероятно, не то, что задумал дизайнер!

Аналогичная проблема возникает с вложенными элементами и значениями em

Так что мы можем сделать вместо этого?

Используйте rem

Вместо риска увеличения или уменьшения font-size

Мы могли бы использовать пиксели, но относительные единицы более гибки в адаптивных проектах, как упоминалось ранее. Вместо этого мы можем использовать модуль remfont-sizehtml В документе .svg или .xml корневой элемент может отличаться, но эти типы документов здесь не являются нашей задачей.

Если мы используем remfont-sizeemempadding

Используйте Sass, чтобы помочь с поддержкой браузера rem

Модуль rem Если вам нужно поддерживать IE8 (или ниже), вы можете использовать полизаполнение JS или предоставить запасной вариант px 

 li {
  font-size: 24px;
  font-size: 1.5rem;
}

Если вы используете Sass, вы можете создать миксин и функцию для расчета желаемого размера в rem 

 @function rem-calc($font-size, $base-font-size: 16) {
  @return ($size/$base-font-size) *1rem;
}
@mixin rem-with-px-fallback($size, $property:font-size) {
  #{$property}: $size * 1px;
  #{$property}: rem-calc($size);
}
li {
  @include rem-with-px-fallback(24);
}

Там у вас есть это. Пара быстрых советов по использованию rem Если вы не используете их в своих текущих проектах, я определенно рекомендую попробовать.

37
Share: