Гибкие макеты: Решаем проблему на корню

info@vsetut.pro

Стать автором

Вернуться

19.01.2025 09:59:57 | Хабр

Хабы: HTML, CSS

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

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

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

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

▎Проблема

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

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

Min-Max-Value Interpolation

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

Подробнее