ROBsoer Sep 16 2016 at 14:11

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

4 min

79K

Website development*CSS*

From sandbox

+32

Comments 20

inoyakaigor Sep 16 2016 at 14:45

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

UFO just landed and posted this here

alexxisr Sep 16 2016 at 15:07

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

inoyakaigor Sep 16 2016 at 15:36

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

alexxisr Sep 16 2016 at 16:10

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

inoyakaigor Sep 16 2016 at 16:47

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

alexxisr Sep 16 2016 at 17:09

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

pudovMaxim Sep 16 2016 at 16:38

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 Sep 16 2016 at 16:38

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

ROBsoer Sep 16 2016 at 15:09

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

ivan386 Sep 16 2016 at 15:33

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

dom1n1k Sep 16 2016 at 16:23

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

janitor Sep 16 2016 at 22:14

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

UFO just landed and posted this here

vintage Sep 17 2016 at 14:27

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

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

vintage Sep 17 2016 at 14:43

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

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

ROBsoer Sep 17 2016 at 14:52

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

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

vintage Sep 17 2016 at 16:13

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

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

-3

ROBsoer Sep 17 2016 at 17:52

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

dom1n1k Sep 18 2016 at 02:37

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

Show the best of all time