Отзывчивый размер шрифта

[inoyakaigor]

font-size: calc( (100vw - 30rem)/(80 - 30) * (1.5 - 1) + 1rem);

можно сократить до

font-size: calc( (100vw - 30rem)/50 * 0.5 + 1rem);

который в свою очередь есть

font-size: calc( (100vw - 30rem)/25 + 1rem);

И тут, кстати, мы получаем новое магическое число: 25

[alexxisr]

если следовать нормальным приоритетам операций умножения/деления, то получим таки:
font-size: calc( (100vw — 30rem)/100 + 1rem);

[inoyakaigor]

Я в толк не возьму: как вы 100 получили?

[alexxisr]

a/50*0.5 = a*0.5/50 = a/(2*50) = a/100
— там нет скобок вокруг умножения, так что умножается числитель, а не знаменатель

[inoyakaigor]

Посыпаю голову пеплом. Совсем школьную математику забыл

[alexxisr]

школьная программа тут пожалуй и мешает — символ / воспринимается мозгом как дробная черта, и всё что правее автоматически становится знаменателем.
я каждый раз сомневаюсь, когда вижу подобное в коде.
поэтому мисра и рекомендует ставить скобки даже там, где они вроде и не нужны.

[pudovMaxim]

x/50 * 0.5 => x/50 * 1/2 => (x * 1) / (50 * 2) => x/100
Для проверки в своих выражения подставьте например 100 вместо (100vw — 30rem).
100/50 * 0.5 = 1
100/25 = 4

[yuratim]

Очень просто a / b * c интерпретируется, как поделить a на b, и результат умножить на c.

[ROBsoer]

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

[ivan386]

Спасибо что напомнили о существовании vmax и vmin. Я при помощи скрипта vw на vh менял.

[dom1n1k]

Видимо, довольно много людей совершило это открытие независимо друг от друга.
С тех пор как я начал использовать аналогичный подход (только у меня vmin и px, но это нюансы), вижу уже где-то третью заметку на эту тему.

[janitor]

Ага, Виталий Фридман неделю назад рассказывал точь-в-точь о такой же формулe на Nordic.js

[vintage]

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

Резюмируя: размер шрифта должен быть комфортным для чтения, а не "адаптивным". А вот размеры и положение блоков уже должны адаптироваться под размер экрана, да.

[vintage]

Собственно, на телефоне с большой диагональю имеем низкое CSS разрешение и как следствие мелкий шрифт:

Собственно размер шрифта должен задаваться в угловых размерах. А это прежде всего пункты, сантиметры и (внезапно!) пиксели.

[ROBsoer]

Если этот шрифт мелкий, так передайте в функцию тот, который Вы считаете нормальным для даного экрана. Размеры в примере взяты с потолка и к реальным устройтвам не имеют никакого отношения.

На выходе мы получем размер в тех величинах, которые задали. Вьюпорт здесь выступает в роли коефициента.

[vintage]

Вы считаете нормальным для даного экрана.

Такой же как и для большого экрана. С чего бы ему вообще зависеть от размера экрана?

[ROBsoer]

В статье вопрос «с чего бы» не поднимался.
Здесь описано решение для тех, кто уже решил для себя этот вопрос (или решили за него, поставив конкретную задачу).

[dom1n1k]

А он, тем не менее, зависит.