x
 
Андрей Пулин
13 сентября 2018
Советы почтой каждую неделю
Пожалуйста, получите наше письмо, чтобы подтвердить свой адрес:
Вы подписаны на «Советы за неделю»:

Руст, важный вопрос: EM или REM? :-)


И em, и rem — относительные величины. Разница между ними в том, что em считается относительно родительского элемента, а rem — относительно корневого. Сравните:

20px
1.2em = 24px
0.625em = 15px
0.8em = 12px
20px
1.2rem = 24px
0.625rem = 12.5px
0.8rem = 16px

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

На десктопе
20px
1.2em = 24px
0.625em = 15px
0.8em = 12px
На мобильном
25px
1.2em = 30px
0.625em = 18.75px
0.8em = 15px

Так em или rem? Зависит от ситуации и ваших предпочтений.

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

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

Помните, что при использовании rem кегль на корневом элементе (<html>) не стоит задавать в пикселях. Дело в том, что браузеры позволяют менять базовый размер текста через настройки (независимо от масштабирования всей страницы). Если задать кегль в абсолютных величинах, то эта настройка не будет работать, что может помешать людям с ограниченным зрением.

Вместо этого запомните, что кегль по умолчанию во всех браузерах — 16 пикселей, и задайте свой базовый относительно него. То есть, вместо 20px — 1.25em.

P. S. Это был совет о веб-разработке. Хотите знать всё о коде, тестах, фронтенд-разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.
Вёрстка и прототипирование — дисциплина Школы дизайнеров. Набор открыт. Чем раньше поступите, тем ниже стоимость и выше шанс на бесплатное место.
 

Твитнуть
Поделиться
Поделиться
Отправить

Цель рубрики — обсуждение вопросов дизайна всех видов, текста в дизайне и взаимоотношений дизайнеров с клиентами.

Мы публикуем комментарии, которые добавляют к уже сказанному новые мысли и хорошие примеры. Мы ожидаем, что такие комментарии составят около 20% от общего числа.

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

Вот такой веб 2.0.

обязательны полностью для публикации комментария
Электронная почта
адрес не будет опубликован
Ваши соображения
Иллюстрация
гиф или джипег шириной не более 700 пикселей
Как вы работаете с правками по вёрстке? Где трекаете? Простейший параллакс на ЦСС Какие фавыконки использовать в 2025? Что нового в ЦСС: text-box-trim




Недавно всплыло

Как верстать текстовые блоки? 3 4 Почему в переписке нельзя использовать «Доброго времени суток»? 2 Как следует поступить дизайнеру, если клиент постоянно вспоминает «нечто очень важное» 7