Как вы делаете в CSS max-font-size?

Как вы делаете в CSS max-font-size?

От автора: в CSS нет max-font-size, поэтому, если нам нужно что-то, что делает то же самое, мы должны прибегнуть к хитрости.

Зачем это вообще нужно? Ну, сам font-size может быть установлен динамически. Например, font-size: 10vw;. Это использует «единицы окна просмотра» для определения размера шрифта, который будет увеличиваться и уменьшаться в зависимости от размера окна браузера. Если бы мы имели max-font-size, мы могли бы ограничить, насколько большим становится шрифт (аналогично другому направлению с помощью min-font-size).

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Существует концепция, получившая название CSS-блокировки, которая становится все более интересной, согласно ей мы медленно масштабируем значение между минимумом и максимумом. Это может быть так…

В CSS есть функция max(), поэтому приведенный выше пример становится однострочным:

Или добавьте минимальное значение:

Что идентично:

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

Теперь, когда у нас есть эти функции, мне кажется маловероятным, что мы когда-либо получим в CSS min-font-size и max-font-size, так как эти они почти аналогичны.

Автор: Chris Coyier

Источник: //css-tricks.com

Редакция: Команда webformyself.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

PSD to HTML

Верстка сайта на HTML5 и CSS3 с нуля

Смотреть

Метки:

Похожие статьи:

Комментарии Вконтакте:

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