Упрощенная гибкая типографика

Упрощенная гибкая типографика

От автора: гибкая типографика — это идея, что font-size (и, возможно, другие атрибуты шрифта, например line-height) меняются в зависимости от размера экрана (или, возможно, запросов контейнера, если они у нас были).

Основная хитрость заключается в единицах на основе окна просмотра. Вы можете буквально задать шрифт в единицах на основе окна просмотра (например font-size: 4vw), но колебания в размерах настолько велики, что это обычно нежелательно. Это имитируется, с помощью чего-то вроде font-size: calc(16px + 1vw). Но в то время как нам все равно нравятся вычисления, самая распространенная реализация оказалась уравнением для вычисления простого английского текста:

Я хочу, чтобы шрифт был от 16px на экране 320px и 22px на экране 1000px. Что дало это:

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

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

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

Это, по сути, установка минимального и максимального размера шрифта, чтобы шрифт не уменьшался и не увеличивался до слишком экстремальных размеров. «CSS-блокировки» — это термин, придуманный Тимом Брауном.

Минимум и максимум ты говоришь?! Ну, так получилось, что функции для них попали в спецификацию CSS в виде min() и max().

Таким образом, мы можем упростить вышеприведенную настройку с помощью одной строки и сохранить блокировки:

На самом деле мы могли бы остановиться на этом. Но вы, вероятно, захотите задать объявление font-size таким образом, чтобы установить приемлемое резервное значение без каких-либо необычных функций.

Но пока мы расширяем границы, есть еще одна функция, которая еще больше упрощает все — clamp()! Она принимает три значения: min, max и гибкие единицы (или расчет или что-то еще), которые будут использовать в случае, если значение находится между минимумом и максимумом. Итак, наша одна строка становится еще меньше:

Это будет реализовано в Chrome 79+ (который не был поставлен в стабильной версии, но скоро появится). Дядя Дэйв очень рад, что FitText теперь занимает несколько байтов вместо all-of-jQuery плюс еще 40 строк. Вот, как Дэйв проверяет пользовательские свойства CSS:

Автор: Chris Coyier

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

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

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

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

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

PSD to HTML

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

Смотреть

Метки:

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

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

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