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

Не все знают, что можно менять размер шрифта в настройках браузера, и тем более не многие этим пользуются. Но если мы хотим обеспечить отзывчивость, мы должны учитывать и этот фактор. Во всех браузерах размер шрифта по умолчанию равен 16px; если это значение будет изменено, будет изменен и размер одного rem. Поэтому все размеры связанные с типографикой и не только лучше задавать в этих единицах.

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

Важно отметить, что изменение всех размеров нас интересует только в пределах минимальной и максимальной ширины макета.

▎Проблема

Например мы хотим задать размер для заголовка первого уровня. При минимальной ширине макета (320px), размер шрифта должен быть 28px.  При максимальной ширине (1440px), размер шрифта должен быть 40px. 

Для решения этой задачи мы можем использовать специальный онлайн калькулятор:

Min-Max-Value Interpolation

Для наших значений мы получим такой код: clamp(1.75rem, 1.536rem + 1.07vw, 2.5rem)

h1 {

    font-size: clamp(1.75rem, 1.536rem + 1.07vw, 2.5rem);

}

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

Можно использовать препроцессор Sass, и написать функцию для расчета значений.

Пример описан в этой статье: “Easy Fluid Typography With clamp() Using Sass Functions”

Но это все еще не выглядит, как хорошее решение.

▎Решение

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

Рассмотрим пример реализации на CodePen

▎Магический коэффициент

Чтобы задать гибкость какому либо размеру нужно связать его с шириной макета. Чем больше ширина, тем больше размер. Для этого нам нужен некий коэффициент, который вычисляет, где текущий экран между минимальной (minWidth) и максимальной (maxWidth) шириной макета. Результатом такого вычисления будет дробное число от 0 до 1.  Коэффициент рассчитывается по следующей формуле:

calc( ( clamp( [minWidth] , 100vw, [maxWidth] ) - [minWidth] ) / ( [maxWidth] - [minWidth] ) )

Теперь мы можем использовать этот коэффициент для калькуляции любого размера.

▎Формула гибкости

calc( ( [maxValue] - [minValue] ) * var(--kw) + [minValue] )

Например, если мы хотим, чтобы при минимальном размере макета отступ был 15px (minValue), и при максимальном 60px (maxValue). То код стилей будет следующим:

padding: calc((60 - 15) * var(--kw) + 15px);

Благодаря коэффициенту --kw размер отступа теперь напрямую связан с изменением ширины макета, в заданных пределах.

▎Как быть rem

Как упоминалось выше, значения для типографики лучше указывать в единицах rem. 1rem соответствует размеру шрифта корневого элемента. Чтобы применить формулу гибкости для калькуляции rem нужно указать минимальное и максимальное значение для одного rem. Считать rem удобнее всего, если он будет равен 10px. Например 14px это 1.4rem. Поэтому возьмем 10px как минимальное значение. Чтобы определить максимальное, можно обратиться к дизайну макета. Например, на мобильной версии заголовок первого уровня равен 30px, а на десктопной 48px. Узнаем во сколько раз 48 больше 30: 48  / 30 = 1,6. Получается максимальное значение rem будет 1,6 * 10px  = 16px.

html { 

    font-size: calc((16 - 10) * var(--kw) + 62.5%); 

}

Откуда взялось число 62.5%? Размер шрифта браузера по умолчанию равен 16 пикселей. Чтобы получить процентное значение 10px от пользовательского размера шрифта, нужно: 10 / 16 = 0.625 = 62.5% . Теперь, если пользователь в настройках браузера изменит размер шрифта, то это изменит и размер rem.

▎Заключение

Теперь всё хорошо. Везде, где возможно, используем rem; там, где значение должно быть в строгом диапазоне, используем формулу гибкости.

Больше полезного материала на моей странице (Boosty)