Как используются rem em при верстке с дизайн-макета?

Question

[godsplane]

Всегда не понимал каким образом можно использовать эти относительные единицы при верстке с макета в фигме например.
Вот есть у меня отступ 32пх, я могу написать условно 2rem, потому что мне легко посчитать в голове. Корчое я не выкупаю фишки,
Для шрифтов в scss я взял функцию котоаря конвертит px в em, но в даже тут я не вижу смысла, потому что я все равно пишу font-size: em(16) -> font-size: 1em;

Comments

[Ankhena]

Вам нужно сделать простую вещь: заглянуть в справочник и выяснить что это за единицы такие.
Следующим ходом подумать о том, что не у всех пользователей хорошее зрение и они ставят увеличенный шрифт в браузере (не масштаб страницы, а именно шрифт это важно).
Сотворите простенькую страничку из стандартных блоков.
По-разному задавайте размеры и блоков и шрифта.
Проверяйте каждый из вариантов в браузере с разными настройками (100%, изменение масштаба, изменение размера шрифта)

em полезны в таких ситуациях: есть блок с размером шрифта 16, в нем заголовок 20. Если заголовок по логике должен оставаться 20 даже если шрифт будет 18, то em не подходят. А если при изменении основного шрифта заголовок тоже должен пропорционально изменится, то можно задать заголовку шрифт в em.

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

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

[godsplane]

Ankhena, да мне понятно зачем они и как работают, вопрос именно в том как это применяется при версте pixel perfect с макета.

[Ankhena]

godsplane,

как это применяется при версте pixel perfect с макета

Также как любые другие единицы.
Какая разница, браузер всё равно всё в px пересчитывает. В макете написано 16px и в браузере должно получится ~16px.
Уточните, что именно вас смущает.

[godsplane]

Ankhena, в том что какой смысла мне писать все в em / rem если по сути на выходе все равно получится пх + скорее всего это не совпадет с макетом

[Ankhena]

godsplane,

скорее всего это не совпадет с макетом

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

Есть в макете блок 1240 шириной и у него 3 дочерних по 400px и между ними по 20px.
Без разницы, напишете вы им calc((100% - 40px)/3) для флексов или инлайн блоков.
Или 1fr и gap для гридов.
Или 25rem при 1rem = 16px (не знаю уж зачем).

в том что какой смысла мне писать все в em / rem

Мой пример выше отражает дибилизм идеи задавать ширину блоков в rem. При наличии % и fr.
Но вы можете писать исходят из ТЗ, разума и того, как вам удобнее.

Какие используете единицы измерения при верстке?

Answer 1

[VegasChickiChicki]

Не знаю насколько хороший пример, но однажды так делал.

Устанавливаешь глобально размер шрифта 10px. Получается что 10px - rem, уже верстасть проще. Все верстаешь в rem'ах, вместо пикселей.

Зачем это?
Что бы адаптировать под большие экраны. Просто увиливаешь шрифт(в медиа запросах) и у тебя весь сайт "скейлится" на пропорциональный размер.

Comments

[Евгений Журов]

Удобно, но так себе затея.