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

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

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

И, поскольку для текста читабельнось важнее красивого расположения, следовало бы все "типографские размеры" приводить в 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.
  • Вопрос задан
  • 13027 просмотров
Пригласить эксперта
Ответы на вопрос 6
Если говорить о мобильном, то если разрешения экрана у него Full HD, то это не значит что контент на нем будет отображаться так же как на десктопе с тем же разрешением. Для этого существует мета тег viewport. Уменьшая размер шрифта для мобильного, ты уменьшаешь его не относительно 1920, а относительно 320px на минимальном для мобилок. Это я к тому что можно использовать просто пиксели для шрифта и выглядеть будет нормально. Просто регулируй в медиа-запросах и все
Ответ написан
Комментировать
Deodatuss
@Deodatuss
html {
  font-size: 1px;
}

body {
  font-size: 16rem;
}

p {
  font-size: 17rem;
}

@media screen and (max-width: 600px) {
  html {
   font-size: 1.2px;
  }
}
Ответ написан
@cluberr
Соль в том что что все размеры типографики, размеры заголовков и их отступы, отступы абзацев и высота строки задаются относительно базового шрифта например 16px. И если нужно изменить всю типографику под конкретное устройство, то в медиазапросе меняется всего одно значение - базовый шрифт, остальное меняется пропорционально.
https://betterwebtype.com/rhythm-in-web-typography
https://www.youtube.com/watch?v=b9M_7ytm-iM
Ответ написан
miraage
@miraage
Старый прогер
Ответ написан
Комментировать
batyrmastyr
@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.
Ответ написан
tomgif
@tomgif
Веб-разработчик
*, *: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%}
}


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

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы