CSS Academy · Урок

Относительные единицы: em и rem

Задавайте размеры элементов относительно размера шрифта родителя или корневого элемента с помощью единиц em и rem.

Урок 2 из 413 шагов

«Относительные единицы: em и rem» — бесплатный урок CSS Academy на CoddyKit. Это урок 2 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения CSS Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс CSS Academy содержит 4 уроков всего.

Что такое относительные единицы

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

em — относительно размера шрифта родителя

em рассчитывается относительно размера шрифта текущего элемента (для самого свойства font-size) или родительского элемента (для других свойств). Это может привести к накоплению масштаба.

<div class="parent">
    Parent (20px)
    <div class="child">
      Child (1.5em = 30px)
      <div class="grandchild">Grandchild (1.5em = 45px!)</div>
    </div>
  </div>

em для отступов

Когда em используется для padding, margin или border-radius, он рассчитывается относительно собственного размера шрифта элемента. Благодаря этому компоненты масштабируются пропорционально.

<button class="button">Padded Button</button>

rem — относительно размера шрифта корневого элемента

rem (корневой em) рассчитывается относительно размера шрифта корневого элемента (html). Он не накапливает масштаб и обеспечивает предсказуемый результат на всей странице.

<h1>Heading (2.5rem = 40px)</h1>
  <p>Paragraph text (1rem = 16px)</p>
  <small>Small print (0.75rem = 12px)</small>

rem и доступность для пользователя

Если пользователь увеличит базовый размер шрифта в браузере (например, с 16px до 20px для удобства чтения), единицы rem увеличатся соответственно. Фиксированные единицы px этого не делают. Поэтому для типографики настоятельно рекомендуется использовать rem.

Размер шрифта корневого элемента в процентах

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

<p>Root font-size respects the browser/user default (100%).</p>

Выбор между em и rem

Практическое руководство:

используйте rem для размеров шрифта, переменных отступов и измерений макета
используйте em для внутренних отступов компонента, которые должны масштабироваться вместе с размером его шрифта (например, для отступа кнопки)

em в медиазапросах

Медиазапросы, заданные в em, реагируют на изменения размера шрифта в браузере. Точка перехода 48em = 768px при настройках по умолчанию, но адаптируется, если пользователь изменил базовый размер шрифта.

<div class="layout">
    <div>Column A</div>
    <div>Column B</div>
  </div>

Вычисление em

Формула: desired px / parent px = em value. Если размер шрифта родителя равен 16px, а требуется текст размером 24px: 24/16 = 1.5em.

<h2>Heading (24px via 1.5rem)</h2>
  <p>Paragraph (18px via 1.125rem)</p>

Проблема накопления em

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

ch — ширина символа

Единица ch равна ширине символа "0" в текущем шрифте. Она полезна для ограничения ширины текстовых контейнеров и создания строк удобной для чтения длины:

<p class="article-body">This paragraph is constrained to about 70 characters per line using the ch unit, which keeps text at a comfortable, readable line length regardless of font size.</p>

Быстрая проверка

У кнопки заданы font-size: 1.25rem и padding: 0.5em. Если размер шрифта корневого элемента равен 16px, чему равен отступ в пикселях?

Ответь в интерактивном уроке

Итоги

em масштабируется относительно размера шрифта текущего элемента (или родительского элемента для самого свойства font-size) — масштаб может накапливаться. rem всегда масштабируется относительно корневого элемента и не накапливает масштаб. Используйте rem для типографики и общих отступов, а em — для пропорциональных внутренних отступов компонентов.

Можно начать бесплатно

Изучай CSS с ИИ-репетитором — бесплатно

Пиши и запускай код прямо в браузере, получай мгновенную помощь от ИИ-репетитора 24/7 и продолжи учиться на сайте или в приложении.

Курсы: 40
Уроки: 159

Начать учиться бесплатно Посмотреть полный курс

Часто задаваемые вопросы

Урок «Относительные единицы: em и rem» бесплатный?

Да — полный текст урока «Относительные единицы: em и rem» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс CSS Academy, подпишись на CoddyKit PRO. Курс CSS Academy содержит 4 уроков всего.

Чему я научусь в уроке «Относительные единицы: em и rem»?

Задавайте размеры элементов относительно размера шрифта родителя или корневого элемента с помощью единиц em и rem. Ты практикуешь CSS Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать CSS Academy?

Предыдущий опыт не требуется. CSS Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 2 из 4.

Сколько времени занимает урок «Относительные единицы: em и rem»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке CSS Academy?

Да. Каждый урок CSS Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

← Назад к CSS Academy