Рассчитать соотношение между font-size и шириной его контейнера. - PullRequest
Новая
       58

Рассчитать соотношение между font-size и шириной его контейнера.

0 голосов
/ 02 марта 2020

Я работаю над соотношением размера шрифта и оптимальной ширины контейнера, в котором они находятся. Я знаю, что оптимальная ширина строки для одного столбца текста составляет от 45 до 75 символов в строке.

Но также должен быть способ рассчитать оптимальную ширину контейнера для этого текста, и если я правильно понял, «длина строки должна быть примерно в 30 раз (между 20 и 40) размером шрифта».

В моем случае у меня есть: 

font-size: 2.488rem;
width: 55vw;

Как изменить размер ширины, чтобы он был пропорционален размеру шрифта?

1 Ответ

0 голосов
/ 02 марта 2020

Если ваш контейнер основан на vw (viewport), вы можете использовать font-size: Xvw, но если ваш контейнер основан на px AFAIK, вы не можете определить его ширину таким образом.

Для vw значения, которые вы даже можете использовать cal c () с минимальным и максимальным значением: 

font-size: calc( [minFS]px + ([maxFS] - [minFS]) * (100vw + [minSS]px)/([maxSS-minSS]);

minFS - минимальный размер шрифта

maxFS - максимальный размер шрифта

minSS - минимальный размер экрана

maxSS - максимальный размер экрана

Например, минимальный размер шрифта 16px для 400 пикселей с максимальным 24px, начиная с 800px: 

font-size: calc( 16px - ( 24 - 16 ) * ( 100vw - 400px ) / ( 800 - 400 );

https://www.smashingmagazine.com/2016/05/fluid-typography/

...