Когда стоит применять em вместо rem?

Question

[eugenedrvnk]

Как-то у меня мозг довольно сильно запутался в плане применения "ремов" и "емов", по этому надеюсь на вашу помощь.

Есть следующий пример:


У всего макета стоит "font-size: 62.5%;" дабы в дальнейшем 1rem = 10px для простоты вычислений.

Скорее всего, у меня возникнет ситуация когда одной из секций (в этом случае единственной), нужно будет уменьшить шрифт, соответственно и отступы между текстом и т.д. Каким образом это должно делаться?

Если через задавать стили для h1 и p в rem, то тогда прийдётся делать так же как и с пикселями, изменять каждое значение. Тогда по идее тут логичнее использовать em, задавая, к примеру секции font-size: 1rem, а значения абзаца и параграфа - в em и в дальнейшем просто уменьшать 1rem на нужное кол-во. Но в некоторых источниках натыкался на информацию мол использовать em и вовсе не стоит, и как тогда поступать?)

И так же, как правильнее будет сделать, к примеру, этот компонент?

Задавать отсутпы в rem и потом через media их менять повсюду?
Или же для компонентов логичнее всё время всё таки использовать em?

Comments

[kunjut19]

если нужно, чтобы текст во вложенных блоках изменялся пропорционально друг другу - используйте em. Меняется размер шрифта родительского элемента - соответственно меняется и размер шрифта дочерних элементов. Я бы не стал использовать такой способ, если есть глубокая вложенность с em-зависимостью. Потому что так труднее управлять размерами шрифта
Как по мне, задавать font-size для целой секции через em - не лучшая идея. Для h1 и p внутри секции - окей

Answer 1

[Арсений Матыцин]

Верстка на rem-ах производится с вычислением от корня документа, т.е. body, html, а em от родителя. Притом если у родителя нет изменения в размере font-size, то поиск изменения будет подниматься вверх вплоть до корня.

Пример тут.

PS: такой подход позволяет на десктопа указать в html, body{ font-size: 20px, а для таблеток и мобильных html, body{ font-size: 16px и верстка будет пересчитана сама.

Comments

[eugenedrvnk]

Арсений Матыцин то есть, по сути, принцип вёрстки остаётся такой же как и на пикселях? К примеру, если мне нужно в каком-то отдельном блоке уменьшить отступы - я уменьшаю/увеличиваю значение, которое указано в rem. И получается преимущество предоставляемое ремами лишь одно - масштабируемость по одному параметру? Просто, как мне кажется, далеко не всегда возникает необходимость изменить размер сразу всего в определённой точке, или же мне неправильно кажется?)

[Арсений Матыцин]

eugenedrvnk, в целом кажется неправильно, но не существует такого правила.

Мне больше импонирует пляска от пиксельной сетки, но я использую в практике все подходы, на самом деле. Правильно собранный проект на rem\em-ах не ломается от того, что где-то ты какие-то размеры задал в пикселах.

[Арсений Матыцин]

eugenedrvnk, хороший пример мастхева em → в оформлении small или класса .small, который по макету всегда пляшет от своего родителя.

[eugenedrvnk]

Арсений Матыцин, em я вроде как смог корректно применить, т.к. была ситуация где нужно было псевдоэлементом установить иконку перед текстом и там соответственно нужно было двигаться в зависимости от шрифта.

Но касаемо ремов всё ещё не до конца въехал в практическую пользу (честно говоря в проекте уже пару раз перегонял единицы измерения туда - сюда из-за как раз таки непонимания).

К примеру возьмём rem = 10px. Есть секция, у неё изначально вертикальные отступы по 100px, в ней есть h1 размером 70px и p размером 16px.

На мобильном экране это должно превратиться в отступы по 40px, h1 в 35px и p размером 14px. Как я понимаю, в этой ситуации какого-то особого выигрыша от rem мы не получаем. Т.к. если сделать rem = 5px, абзац будет корректным, но параграф и отступы всёравно нужно прописывать вручную и как понимаю прибегнуть нужно будет всё к тем же пикселям, т.к. отсчитывать от 5rem будет не особо удобно.

В такой ситуации rem не особо нужны? Или их всё равно желательно использовать, но в каких-то моментах просто перегонять в пиксели? Если значение, допустим, не должно изменяться и т.д.

// Надеюсь не запутал вас больше своего (:

[Арсений Матыцин]

Еще раз, rem отсчитываются от размера шрифта основного. Врядли у тебя будет шрифт в 10px основной, поэтому будет наоборот.

1rem = font-size в body (по умолчанию, если не задать, то браузер дает свое значение, в пределах 12–16).
Но допустим ты указал (должен был это сделать), потому что в макете основной текст = 18px, к примеру.

Тогда 1rem = body{font-size = 18px.

Дальше как строятся размерности можно глянуть в обновленном примере. Грубо и на скорую руку.

[Арсений Матыцин]

eugenedrvnk, иными словами, последний вопрос был не совсем корректен.

[eugenedrvnk]

Арсений Матыцин, благодарю за уделённое время, я писал rem = 10px, опираясь на практику когда f-size ставят 62.5% для простоты вычислений. Попробую всё же тогда всё перегнать обратно в rem'ы, верстать по аналогии к пикселям и ждать момента когда во время адаптива замечу что большую часть элементов можно пропорционально уменьшить.

Спасибо ещё раз за ответы, примеры и помощь в целом.

Answer 2

[Антон Литвиненко]

Вот тут хорошо описано отличие em от rem:
https://learn.javascript.ru/css-units
В двух словах, em наследует от текущего размера родителя, а rem от базового размера шрифта, заданого html.

Недавно довелось дорабатывать верстку, сделанную полностью на rem. Так вот, я по привычке некоторыее размеры писал в пикселях, в частности размеры кнопки у слайдера итд. Идея была в том, чтобы на мониторах 4к хорошо выглядело, в итоге базовый шрифт для 4к мониторов был увеличен до 30. НО! Все размеры что я писал в пикселях пришлось тоже переписать на ремы, потому что кнопки стали пропорционально слишком мелкие

Собственно есть даже плагины для галпа, которые переводят ваши пиксели сразу в ремы

Comments

[eugenedrvnk]

И опять же, вёрстка сделанная полностью на rem. Это подразумевает что если в каком-то конкретно случае нужно уменьшить у блока отступы и font-size, то это необходимо каждому свойству прописывать уменьшенные значения?

Просто, как я понимаю, при использовании rem суть такова, что при определённом breakpoint, если меняется корневой размер шрифта - все элементы перестраиваются, но это ведь далеко не всегда необходимо. (к примеру, когда в секции с h1, он должен уменьшаться раньше текста в остальных секциях)

// извиняюсь за возможно весьма глупые формулировки, но просто у меня есть по отдельности понимание что делает rem, что делает em, но всё никак не состыкуется в толковое понимание где, какие единицы корректнее будет применять.

[Антон Литвиненко]

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

Собственно, при работе с рем базовый размер в хтмл задают как раз в пикселях

[eugenedrvnk]

Антон Литвиненко, т.е. всё преимущество вёрстки в ремах сводится к возможности изменить весь макет, меняя корневое значение? Просто, как мне кажется, это далеко не всегда необходимо.

[eugenedrvnk]

Антон Литвиненко, и можно ещё небольшой момент, можно ли это утверждение считать верным и пример корректным? (в моем случае разделение на компоненты присутствует)

[Арсений Матыцин]

eugenedrvnk, это классово верный подход при наличии дизайн-гайда в проекте.