[Базовый] EM или REM? это проблема!

внешний интерфейс CSS

Кратко

значок приложенияEMа такжеREMЭта относительная единица длины для макета страницы является передовой практикой в ​​веб-разработке. Лучшее приложение в макете страницыEMа такжеREM, который масштабирует размер элемента дисплея в соответствии с размерами устройства. Это позволяет компонентам оптимально отображаться на разных устройствах.

Но вопрос в том, использовать лиEMещеREMШерстяная ткань? По этому вопросу разгорелись серьезные споры. Эта статья познакомит вас с тем, чтоEMа такжеREMИ как выбрать между ними и объединить преимущества обоих для создания модульных веб-компонентов.

Примечание: Содержание этой статьи простое, только для младших разработчиков, около 2500 слов, а время чтения 5 минут.

1 Что такое ЭМ?

emявляется относительной единицей длины. Это относительно текущего размера шрифта элемента, т.е.font-size. Например, если шрифт текущего элемента равен 20px, то 1em в текущем элементе равен 20px.

h1 { font-size: 20px } /* 1em = 20px */
p { font-size: 16px } /* 1em = 16px */

В реальной разработке относительные единицы длины (например,em) для указания размера шрифта — это лучшая практика в веб-разработке.

Рассмотрим следующий код:

h1 { font-size: 2em }

Каков размер шрифта элемента h1 здесь?

В это время нам необходимо<h1>Размер шрифта родительского элемента для расчета<h1>Размер шрифта. если родительский элемент<html>,а также<html>Размер шрифта 16px. можно рассчитать<h1>Размер шрифта составляет 32 пикселя, то есть 2*16 пикселей.

Выражается в коде следующим образом:

html { font-size: 16px }
h1 { font-size: 2em } /* 16px * 2 = 32px */

настраивать<html>Размер шрифта, как правило, плохая идея, потому что он переопределяет настройки браузера пользователя по умолчанию. Вместо этого можно использовать процентное значение или вообще не объявлять его.<html>размер шрифта.

html { font-size: 100% } /* 缺省 16px */

Для большинства пользователей или браузеров размер шрифта по умолчанию составляет 16 пикселей (размер шрифта браузера по умолчанию не задан).

emЕго также можно использовать для указания других свойств помимо размера шрифта, напримерmarginилиpaddingи другие свойства могут быть использованыemПредставлять.

Рассмотрим следующий код, для<h1>а также<p>элемент,margin-bottomКаким должно быть значение? (при условии<html>размер шрифта установлен на 100%).

h1 {
  font-size: 2em; /* 1em = 16px */
  margin-bottom: 1em; /* 1em = 32px */
}
p {
  font-size: 1em; /* 1em = 16px */
  margin-bottom: 1em; /* 1em = 16px */
}

вышесказанное<h1>а также<p>Все поля margin-bottom равны 1em, но результирующее значение поля отличается. Вышеупомянутое явление возникает потому, чтоemразмер относительно шрифта текущего элемента. из-за<h1>Размер шрифта теперь установлен на 2em, поэтому<h1>Значение 1em других свойств в1em = 32px. Здесь легко ошибиться.

2 Что такое РЭМ?

remОн представляет собой корневой EM, который является единицей относительно длины корневого элемента. Вот корневой элемент<html>Размер шрифта, определенный в . Это означает, что 1rem в любом месте всегда равен<html>Размер шрифта, определенный в .

Используя тот же код выше, мы используемremзаменитьem,Проверитьmargin-bottomКаково расчетное значение ?

h1 {
  font-size: 2rem;
  margin-bottom: 1rem; /* 1rem = 16px */
}
p {
  font-size: 1rem;
  margin-bottom: 1rem; /* 1rem = 16px */
}

Как показано в приведенном выше коде, 1rem всегда равно 16px (если не изменено<html>размер шрифта).remразмер по сравнению сemСмысл более прямой и ясный, и его легко понять.

3 БДМ или ЭМ?

Какой выбор в разработке проекта?remещеemСпоры продолжаются. Некоторые разработчики не используютrem,потому чтоremДелает компоненты менее модульными. в то время как другим разработчикам нравитсяremпростота использованияremОбработать все элементы.

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

Итак, как выбрать между ними в конкретных приложениях? Есть два простых руководящих принципа:

  • Если размер атрибута должен масштабироваться в соответствии со шрифтом элемента, используйтеem
  • Использовать во всех остальных случаяхrem

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

3.1 Используйте только REM

Здесь мы используем толькоremЧтобы написать компонент заголовка, код и результаты выполнения следующие:

.header {
  font-size: 1rem;
  padding: 0.5rem 0.75rem;
  background: #7F7CFF;
}

用rem实现header测试图1

Затем веб-сайту нужен более крупный компонент заголовка.

Измените код CSS следующим образом:

.header {
  font-size: 1rem;
  padding: 0.5rem 0.75rem;
  background: #7F7CFF;
}
.header-large {
  font-size: 2rem;
}

Результаты приведены ниже:

用rem实现header测试图2

Как видно из приведенных выше результатов выполнения, заполнение текста (padding) слишком мал, эффект отображения непостоянен. Если мы настаиваем на использовании толькоrem, вы можете изменить код CSS только следующим образом:

.header {
  font-size: 1rem;
  padding: 0.5rem 0.75rem;
  background: #7F7CFF;
}
.header-large {
  font-size: 2rem;
  padding: 1rem 1.5rem;
}

Результат после изменения следующим образом:

用rem实现header测试图3

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

В это время вы можете использоватьemПриведенный выше код можно изменить следующим образом:

.header {
  font-size: 1rem;
  padding: 0.5em 0.75em;
  background: #7F7CFF;
}
.header-large {
  font-size: 2rem;
}

Пожалуйста, смотрите демонстрационную программу для текущего результата:

демо-код

Как показано в приведенной выше демонстрационной программе, когда размер значения атрибута элемента необходимо масштабировать в соответствии с размером шрифта элемента, его следует применитьemдля определения размера атрибута. Это первое из предыдущих правил.

3.2 Использование только EM

Если только использоватьemЧтобы определить вышеуказанные компоненты, каков будет результат?

Мы меняем приведенный выше код следующим образом (emзаменятьrem):

.header {
  font-size: 1em;
  padding: 0.5em 0.75em;
  background: #7F7CFF;
}
.header-large {
  font-size: 2em;
}

Чтобы приблизиться к реальности, введем<p>элементы и изменитьhtmlкод показывает, как показано ниже:

<div class="header header-large">名人名言</div>
<p>简单是稳定的前提</p>
<div class="header">名人名言</div>
<p>简单是稳定的前提</p>

Добавьте код css элемента p следующим образом:

p {
    padding: 0.5em 0.75em;
}

Результаты приведены ниже:

用em实现header测试图1

По результатам вышеописанной операции нетрудно видеть, что.header-largeЗаголовки разделов не выровнены по левому краю текста. а если только использоватьemЧтобы добиться выравнивания по левому краю, вам нужно изменить код CSS следующим образом:

.header {
  font-size: 1em;
  padding: 0.5em 0.75em;
  background: #7F7CFF;
}
.header-large {
  font-size: 2em;
  padding-left: 0.375em;
  padding-right: 0.375em;
}

Результат после замены такой:

用em实现header测试图2

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

Решение вышеуказанной проблемы заключается в объединенииemа такжеrem, даже используяemЧтобы определить верхнее и нижнее поля, используйтеremОпределите левое и правое поля. Измененный код выглядит следующим образом:

.header {
  padding: 0.5em 0.75rem;
  font-size: 1em;
  background: #7F7CFF;
}

.header-large {
  font-size: 2em;
}

Пожалуйста, смотрите демонстрационную программу для текущего результата:

демо-код

3.3 Резюме EM или REM

что именно нужно использоватьemещеremШерстяная ткань? Ответ должен состоять в том, чтобы объединитьremа такжеrem. Когда размер значения атрибута необходимо масштабировать в соответствии с размером шрифта текущего элемента, он используется.em, в остальных случаях используйте более простойrem.

4 Установка значений em и rem

emа такжеremЗначения атрибутов должны быть преобразованы в абсолютные единицы длины посредством вычислений. Обычно используемые размеры шрифта трудно выразить в относительных единицах длины. См. ниже общие значения шрифта.remПредставление (базовый размер шрифта 16px):

  • 10px = 0.625rem
  • 12px = 0.75rem
  • 14px = 0.875rem
  • 16px = 1rem (base)
  • 18px = 1.125rem
  • 20px = 1.25rem
  • 24px = 1.5rem
  • 30px = 1.875rem
  • 32px = 2rem

Как показано в приведенном выше списке, представление и вычисление вышеуказанных значений размеров не являются неудобными. Для решения вышеуказанных проблем используется небольшая хитрость, а именно знаменитая методика «62,5%». Подробности смотрите в следующем коде:

body { font-size:62.5%; }  /* =10px */
h1   { font-size: 2.4em; } /* =24px */
p    { font-size: 1.4em; } /* =14px */

С настройками 62,5% им легко пользоваться.emЧтобы определить размер конкретного атрибута (10-кратное отношение).

а такжеrem, вам необходимо сделать следующее:

html { font-size: 62.5%; }  /* =10px */
body { font-size: 1.4rem; } /* =14px */
h1   { font-size: 2.4rem; } /* =24px */

5 адаптивных примеров

Простой адаптивный пример, отрегулируйте ширину браузера, чтобы увидеть демонстрацию.

демо-код

6 ссылок

  1. W3C:CSS Values and Units Module Level 3
  2. Zellwk: rem vs em - большие дебаты
  3. sitepoint:Understanding and Using rem Units in CSS
  4. tutsplus:Comprehensive Guide: When to Use Em vs. Rem
  5. css-tricks:Confused About REM and EM?

7 Описание

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

Категории