Страницы

Поиск по вопросам

воскресенье, 9 июня 2019 г.

Правильное использование единиц rem

Допустим, я указываю все размеры шрифтов в rem единицах, далее я при определенном размере экрана задаю уменьшение шрифта, но выходит так, что шрифты, которые до этого уже были маленькими, стали еще меньше, до такой степени, что они более нечитабельны.
Вот пример:
html { font-size: 10px; } h1 { font-size: 4rem; } h2 { font-size: 3rem; } h3 { font-size: 2.5rem; } h4 { font-size: 2rem; } p { font-size: 1.4rem; } @media screen and (max-width: 600px) { html { font-size: 6px; } }

Simple text

Simple text

Simple text

Simple text

Simple text


Вопрос в том, что делать в таких случаях? Как правильно поступать? Для маленьких шрифтов задавать значения размера в абсолютных величинах?


Ответ

Подходов для динамической типографики может быть много, я бы на вашем месте обратил внимание на возможности функции calc() и, может быть, на зависимость размера шрифта от ширины экрана — простейшая формула font-size: calc(1rem + 1vw), с деталями коэффициентов надо уже экспериментировать. Также можете поинтересоваться темой CSS-шлюзов.
В вашем конкретном случае получается так, что вы задаете базовый размер шрифта 6 пикселей — потому естественно, что текст будет очень мелким. Вот пример, как этого частично можно избежать с применением функции calc() и цсс-переменных. Надо добавить увеличивающий коэффициент к тем значениям, которые становятся слишком мелкими на маленьких экранах, в то время как на больших оставить его равным единице.
html { font-size: 10px; --font-ratio: 1; } h1 { font-size: 4rem; } h2 { font-size: 3rem; } h3 { font-size: 2.5rem; } h4 { color: red; font-size: calc(2rem * var(--font-ratio)); } p { color: red; font-size: calc(1.4rem * var(--font-ratio)); } @media screen and (max-width: 600px) { html { font-size: 6px; --font-ratio: 1.25; } }

Simple text

Simple text

Simple text

Simple text

Simple text


Комментариев нет:

Отправить комментарий