Как грамотно использовать rem в адаптивной вёрстке?

Question

[Максим Васильев]

Я типа начинающий верстальщик, и у меня есть некоторые проблемы с пониманием мира.

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

И, поскольку для текста читабельнось важнее красивого расположения, следовало бы все "типографские размеры" приводить в rem. При этом к типографским размерам по идее относятся также отступы margin у всех текстовых элементов и отступы padding у их контейнеров, а также иногда ширина контейнеров (чтобы примерно попадать в количество букв), и наверно, что-то ещё.
В результате образуется куча гемора при сочетании графических размеров в пикселах и типографских в непредсказуемых rem. И это в добавок к "композиционным" размерам в процентах. Особенно если у дизайнера получилось, что базовый шрифт не 16px, а какие-нибудь 14.25px±50%. Как вы вобще с этим работаете?

Вопрос - насколько эта заморочка корректна и оправдана.
1. Реально ли пользователи подстраивают размер шрифта?
2. Что именно относить к "типографским размерам" которые надо бы в em/rem?

P.S.
В material-components-web используется rem, и некоторые отступы в em/rem.
А angular/material используются везде px.
Оба из расчёта типа 1rem = 16sp = 16px.

Answer 1

[Тимур Худиев]

Если говорить о мобильном, то если разрешения экрана у него Full HD, то это не значит что контент на нем будет отображаться так же как на десктопе с тем же разрешением. Для этого существует мета тег viewport. Уменьшая размер шрифта для мобильного, ты уменьшаешь его не относительно 1920, а относительно 320px на минимальном для мобилок. Это я к тому что можно использовать просто пиксели для шрифта и выглядеть будет нормально. Просто регулируй в медиа-запросах и все

Answer 2

[ValeraValera]

Соль в том что что все размеры типографики, размеры заголовков и их отступы, отступы абзацев и высота строки задаются относительно базового шрифта например 16px. И если нужно изменить всю типографику под конкретное устройство, то в медиазапросе меняется всего одно значение - базовый шрифт, остальное меняется пропорционально.
https://betterwebtype.com/rhythm-in-web-typography
https://www.youtube.com/watch?v=b9M_7ytm-iM

Comments

[Максим Васильев]

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

[Zuckerberg]

ValeraValera

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

Привет, ссори, что возвращаюсь к старому вопросу ... но я новичек в верстке, начал верстать в rem'ах. Сверстал значит, потом начал уменьшать значение html, а так как у меня заголовки и отступы у секций намного больше размера шрифта параграфов и другого текста, то этот текст в итоге получился мизерным. Получается надо опять переопределять значения. В чем соль тогда этих рэм не могу понять? Что в рэмах, что в пикселях идет переопределение.
Но мне пришла в голову мысль - грамотно ли будет большие значений делать в рэмах, а всё остальное в пикселях?

Answer 3

[Mikhail Osher]

https://habr.com/post/280125/

Answer 4

[batyrmastyr]

базовый шрифт не 16px, а какие-нибудь 14.25px±50%

За такое надо исправить должность на "дизагнира". Дробные пиксели все браузеры отображают как хотят: кто-то округлит до целых, кто-то до сотых, как у вас, а кто-то честно отрисует даже 14,674956954px. Добавьте субпиксельное сглаживание и получите кучу вопросов "а что у вас шрифт такой мыльный?".

Реально ли пользователи подстраивают размер шрифта?

Сейчас пользователи могут только всю страницу масштабировать. Особо не пользуются, только если со зрением (у пользователя или создателей сайта) проблема.

Чего точно не стоит делать, так это смешивать пиксели и типографские пункты. Либо {font-size: 1em, line-height: 1.25em}, либо {font-size: 16px, line-height: 20px}. У нас сейчас решили использовать пиксели чтобы не думать, чему будут равны 1,4 пункта, особенно если кому-то приспичит сменить размер шрифта. Хотя лично я считаю допустимым при вёрстке в пикселях иногда использовать em для указания отступов, например, в :first-letter.

Comments

[pacman123]

Считаете приемлемым вариантом указание размера шрифта для всего документа в 62,5% с последующим использованием rem?

[batyrmastyr]

pacman123, хорошая шутка. Можете назвать хоть один браузер в котором (браузерный шрифт по-умолчанию) * 1,625 даст целое число?

[pacman123]

batyrmastyr, в смысле?? это же самая распространенная практика
не *1,652, а *0,625

16px*0,625 = 10px в любом браузере

[batyrmastyr]

pacman123, простите, переклинило с лишней единицей. Даже для вёрстки в rem для корня лучше указать размер в пикселях, чтобы вёрстка не поехала если в каком-то браузере (осознанно или из-за ошибки) базовый шрифт сделают отличным от 16 пикселей (раньше размеры по-умолчанию были и 13px, и 15px, в зависимости от браузера и его версии, насколько помню).

Answer 5

[Роман Ямчук]

*, *:before, *:after {
  box-sizing: inherit;
}

html {
  font-size: 62.5%; /* 10px */
}

body {
  font-size: 200%; /* 20px */
}

Итак, поехали: теперь у нас есть 2 типа относительных единиц REM (10px) и EM (20px). REM - будет фиксирован во всём документе. EM - можно переопределить для конкретного блока. После того как весь макет будет свёрстан при помощи относительных единиц - достаточно просто будет адаптировать его под другие разрешения:

@media all and (min-width: 1200px) {
  html {font-size: 39.0625%} /* 1200/1920 * 62.5 */
}

@media all and (min-width: 1440px) {
  html {font-size: 46.875%}
}

@media all and (min-width: 1600px) {
  html {font-size: 52.0833333333%}
}

@media all and (min-width: 1920px) {
  html {font-size: 62.5%}
}

Осталось только переопределить нужные блоки макета под разрешение

Comments

[Виолетта Морозова]

гребанная дииииичь *headshot*

[Egor]

В принципе довольно просто и весьма полезно в адаптиве.
Хех для многих этот процент и его вычисление - становятся чем-то сверхъестественным :-))