REM против EM: Как выбрать правильную единицу измерения CSS

Вы, вероятно, не мечтаете ночью о размерах элементов CSS, но если вы создаете сайт или приложение, эту тему определенно стоит обдумать.

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

Рассмотрите пары REM и EM. Какой из них использовать и почему?

Останьтесь с нами еще несколько абзацев, и мы всё раскроем!

REM против EM вкратце

Если вы ищете быстрый ответ, вот краткая версия:

REM: Эта единица измерения основана на корневом элементе (обычно это тег <html>). Независимо от того, что происходит на странице, размеры останутся стабильными.
EM: Эта единица измерения ищет ориентиры. Если родительский элемент изменится, размеры также изменятся.

Если вы хотите запомнить различие, помните, что “R” в REM означает “Root”.

Сравнение единиц REM и EM в CSS, показывающее их отношение к корневым и родительским элементам соответственно.

Заметка для гиков: Почему обе единицы заканчиваются на «EM»? Это не аббревиатура. Во времена, когда весь текст печатали, типографы использовали ширину заглавной буквы M в качестве эталона для размера текста. Довольно изящно, правда?

Итак, какой из них вам следует использовать?

Ну, это зависит.

Если вы хотите, чтобы текст адаптировался к окружающей среде, EM может быть лучшим вариантом. Но если вы хотите, чтобы размеры оставались одинаковыми на всем вашем сайте, вам следует переключиться на REM.

Почему?

EM: Более гибкий, но может стать запутанным, если быть невнимательным.
REM: Постоянный размер, отлично подходит для адаптивного дизайна.

Глоссарий DreamHost

Адаптивный дизайн

Адаптивный дизайн позволяет веб-сайту адаптироваться к размеру экрана устройства, на котором он просматривается. Таким образом, веб-сайт будет выглядеть по-разному на разных устройствах.

Все еще смущены? Не беспокойтесь, мы объясним более подробно через мгновение.

Просто запомните это на данный момент: REM обычно является более безопасным выбором для большинства сайтов.

Связанная статья

How to Learn CSS In 2024 (Fast & Free)

Понимание REM и EM

Хорошо, давайте немного погрузимся в детали.

Как REM, так и EM являются относительными единицами. Это означает, что они сохраняют одинаковый размер относительно определенной мерки.

Такой подход к размерам играет ключевую роль в адаптивном дизайне.

Абсолютные размеры (например, px) всегда остаются неизменными, что означает, что текст может выглядеть мелким на настольном компьютере и огромным на телефоне. В отличие от этого, относительные единицы могут адаптироваться к различным устройствам и макетам.

В цифровом контексте, REM и EM все еще в основном используются для измерения текста. Однако, вы также можете использовать эти единицы для:

Поля
Отступы
Ширина и высота
Высота строки
Свойства границы
Тень блока
Позиционирование
Медиа запросы

Другими словами, REM и EM полезны, когда вам нужен гибкий размер в вашем дизайне.

Итак, это в основном охватывает общие аспекты этих двух единиц.

Теперь давайте более внимательно рассмотрим, что делает каждый из них уникальным.

Знакомство с REM

REM означает “root em.” Когда вы используете эту единицу, вы определяете размер чего-либо относительно размера шрифта корневого элемента (обычно это тег <html>).

Большинство браузеров использует значение 16px для корневого элемента. Однако рекомендуется устанавливать размер шрифта по умолчанию с использованием CSS.

Вы можете сделать это так:

html { font-size: 16px; /* Ваш базовый размер шрифта */ }

Любой выбранный вами размер становится 1rem. Это ваша новая базовая линия для всей страницы.

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

Это немного сложно объяснить ясно, поэтому вот простой пример:

html { font-size: 16px; /* Ваш базовый размер шрифта */ } body { font-size: 1.2rem; /* 19.2px */ } h1 { font-size: 2.4rem; /* 38.4px */ }

В данном случае мы задали размер шрифта тега <html> равным 16px. Это наша базовая величина 1rem.

Мы хотим, чтобы текст нашего основного содержимого был немного крупнее. Поэтому мы установили размер шрифта тега <body> равным 1.2rem. Это 120% от базового размера.

Основной заголовок на нашей странице должен быть намного больше. Установив размер шрифта <h1> в 2.4rem, мы можем сделать заголовок на 240% больше базового размера.

У вас получится что-то вроде этого:

Диаграмма размеров шрифтов в единицах REM. HTML со значением 16px, h1 с 2.4rem (38.4px) и body с 1.2rem (19.2px) с примером текста.

Почему стоит использовать REM?

Каковы преимущества этой системы?

В CSS, единицы REM предлагают некоторые довольно хорошие преимущества:

Истинная согласованность: Все масштабируется пропорционально базовому размеру, так что ваш дизайн всегда будет выглядеть точно так, как вы задумали, на любом устройстве.
Отзывчивость: Пропорциональное масштабирование означает, что ваш веб-сайт или приложение может адаптироваться к широкому спектру устройств.
Легкость обслуживания: Когда все ваши стили основаны на одной и той же базовой настройке, легко вносить глобальные изменения по мере необходимости — вам не нужно посещать каждый элемент и вручную изменять размер шрифта. Это также экономит вам много времени.
Отличная доступность: Довольно много людей действительно изменяют стандартный размер шрифта в своих браузерах, чтобы текст было легче читать. Использование размеров REM позволяет вашему дизайну адаптироваться к этим предпочтениям пользователей.

Конечно, не всё так радужно. Есть и некоторые недостатки:

Сторонние Wildcard’ы: Если на вашем сайте есть встроенный контент, вы можете обнаружить, что текст и другие элементы не следуют вашим правилам REM.
Сложные расчёты: Вычисление точного размера 1.2rem требует некоторых математических знаний.
Большая власть, большая ответственность: Когда вы можете так легко изменять размер текста на вашем сайте, вам нужно быть осторожным с правками, чтобы избежать дизайнерских катастроф на всем сайте!

Как общее правило, REM должен быть вашим основным выбором для большинства проектов. Это проще в обращении, чем размерность EM, и результаты более предсказуемы.

Однако бывают случаи, когда EM полезен.

Начало работы с EM

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

Путаница начинается, когда вы начинаете вложенность. Большинство элементов наследуют размер шрифта по умолчанию от своего родителя. Но что, если родитель тоже использует размеры в EM? Вы можете легко оказаться в запутанной ситуации с пропорциональностью.

Вот простой пример:

Предположим, у вас есть страница, которая содержит <div>. Внутри этого блока находится <p> тег, содержащий текст.

<html> <div> <p>Некоторый текст здесь.</p> </div> </html>

Теперь давайте рассмотрим CSS для этого фрагмента HTML:

html { font-size: 16px; /* Начальный размер по умолчанию */ } div { font-size: 1.2em; /* 19.2px */ } p { font-size: 1.2em; /* 23.04px */ }

Мы начали с определения стандартного размера шрифта для всей страницы. Пока всё идет хорошо.

Далее, мы сказали, что содержимое <div> должно быть 1.2em. Другими словами, наш текст должен составлять 120% от размера родительского элемента по умолчанию.

Для завершения, мы также делаем размер шрифта <p> 1.2em.

Диаграмма размера шрифта в единицах EM, показывающая вложенные текстовые элементы и их относительные размеры на основе родительских элементов.

Подождите минутку! Здесь наблюдается значительное увеличение размера текста, измеряемого в пикселях.

Почему это так?

Элемент <p> взял размер шрифта своего родительского элемента <div> (19.2px) в качестве стандартного. И поскольку мы запросили 1.2em, мы получаем текст, который на 120% больше стандартного размера.

Такие ошибки легко совершить, когда вы работаете с единицей EM.

EM отлично подходит для конкретных размеров

Несмотря на недостатки, единица измерения EM может быть очень полезной для задания размеров конкретных компонентов.

Предположим, вы хотите создать кнопку, которая всегда занимает примерно одинаковое количество места внутри своего родительского элемента.

Ваш HTML-код может быть:

<button class='button'>Кликните здесь</button>

Чтобы стилизовать вашу кнопку, вы можете использовать единицы EM для font-size и padding.

CSS будет выглядеть примерно так:

.button { font-size: 1em; /* Размер относительно размера текста родителя */ padding: 0.5em 1em; /* Отступы масштабируются с размером шрифта */ }

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

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

Если размер шрифта родительского элемента увеличивается, размер шрифта и отступы кнопки соответственно изменятся.

Таким образом, вы сможете поддерживать одинаковый визуальный баланс между элементами внутри родителя, даже если вы измените устройства или уровень масштабирования.

Почему использовать EM?

Учитывая всю путаницу, зачем вообще использовать EM?

Ну, это действительно имеет некоторые преимущества:

Контекстное масштабирование: Элементы масштабируются в зависимости от размера родительского элемента, что дает вам более тонкий контроль над размерами в вашем дизайне.
Дизайн на основе компонентов: Единицы EM отлично подходят для создания самостоятельных, многоразовых компонентов, которые сохраняют одинаковые пропорции.
Точный контроль: Вы можете точно настраивать размеры на каждом уровне структуры документа, не внося глобальные изменения.
Адаптивность: Как и единицы REM, единицы EM позволяют вашему дизайну адаптироваться к различным размерам экранов и предпочтениям пользователей.

Как мы видели, существуют также некоторые недостатки:

Кумулятивные эффекты: Вложенные элементы могут приводить к неожиданным размерам, так как значения EM начинают накапливаться.
Проблемы с поддержкой: Изменение размера шрифта родительского элемента влияет на все дочерние элементы, что может привести к непредвиденным последствиям — например, к огромному тексту основного содержания и крошечным заголовкам.
Сложность в больших проектах: По мере роста вашего проекта отслеживание всех относительных размеров может стать сложной задачей.

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

REM или EM: Что использовать?

Ну, это было много интересной информации. Однако, если вы что-то создаете, вам просто нужно знать, какую единицу CSS использовать.

Вот наш вердикт:

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

Также стоит отметить, что как REM, так и EM обычно лучше подходят для современного дизайна, чем абсолютные единицы, такие как px.

Они также более практичны для изменения размера текста по сравнению с другими относительными единицами, такими как единицы обзора (vh/vw) и проценты (%).

Давайте рассмотрим REM и EM с высоты птичьего полета:

Особенности	REM	EM
Наследование	Соответствует корневому элементу	Относительно родительского элемента
Масштабируемость	Отличная	Более ограниченная
Сложность	Ниже, за счет согласованности	Выше, из-за контекстного размера
Обслуживание	Простое — изменения размера корня распространяются	Может быть более сложным с вложенными элементами
Доступность	Хорошо работает с предпочтениями пользователя	Может потребовать корректировок
Лучше всего подходит для	Глобального расстояния и макета	Масштабирования специфических компонентов

REM и EM: Часто задаваемые вопросы о размере шрифтов

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

Но если у вас все еще остались вопросы, вот что вам нужно знать!

Следует ли использовать REM или EM для адаптивного дизайна?

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

Единственное исключение — когда вы хотите создать отдельные единицы, где все элементы сохраняют одинаковое соотношение размеров.

Как избежать сложностей при использовании единиц EM?

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

Существует ли рекомендуемый базовый размер шрифта для REM?

Хотя строгого правила нет, обычный базовый размер шрифта для REM — 16px. Однако вы можете выбрать любое значение, которое подходит вашим дизайнерским предпочтениям и требованиям доступности.

Погрузитесь глубже в CSS

Хотите узнать больше о цифровом дизайне? У нас много отличных ресурсов для изучения CSS:

Адаптивный дизайн имеет значение

Единица CSS — это компонент, который часто упускают из виду, как мы упоминали в начале этого руководства.

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

Дебаты о том, использовать REM или EM, не имеют большого значения в конечном итоге — Самое важное, чтобы ваш сайт был доступен, адаптивен и удобен в использовании!

Просто помните, что красивый интерфейс ничего не значит, если ваш сайт или приложение не загружаются. Когда речь идет о предоставлении вашим пользователям лучшего опыта, рассмотрите возможность улучшения вашего хостинга с DreamHost.

Мы предлагаем гарантию бесперебойной работы на 100% по всем нашим тарифным планам shared hosting, с оптимизированными серверами и отличными функциями безопасности. Зарегистрируйтесь сегодня, чтобы увидеть разницу сами!