Вопрос с адаптацией?

Question

[Idwln]

Вообщем перед со мной стоит задача адаптации сайта. Сам контейнер в котором содержится весь сайт я могу адаптировать в 3 действия(большой экран, средний и телефон), но есть шапка сайта, которая идёт на весь экран. Адаптирую я при помощи @media . Так вот: для шапки мне пришлось сделать миллион медиа тегов, уменьшая каждый раз расстояние между объектами или уменьшая шрифт. Можно ли это сделать при помощи меньшего кода?
Код:
https://codepen.io/idwln/pen/PoEvjGN

Comments

[Сергей Сергей]

https://developer.mozilla.org/ru/docs/web/css/calc

[Idwln]

Сергей Сергей, А как именно правильно это применить? Есть идея уменьшать на % от масшатаба каждый раз, но как правильно реализовать?

[Сергей Сергей]

Например, я заметил пошаговое изменение отступов, по идее можно ограничится простым 4%, но может будет лучше с каким-то минимумом делать.
margin-left: calc( 4vw + 1em );
при сжатии по ширине 1em никуда не денется.

Нужно просто "поиграть" с расчётами, а дальше идеи использования придут. Надеюсь. Конечно, полностью от media не избавиться.

[Idwln]

Сергей Сергей, Т.е как я понял исправления всего при помощи одной функции нет. Но зато можно сократить те записи, которые я использовал. Особенно там, где я пошагово делаю одно и тоже при уменьшении)

Answer 1

[wadowad]

Проблему со шрифтами можно решить без медиа запросов с помощью функции clamp https://developer.mozilla.org/ru/docs/Web/CSS/clamp

font-size: clamp(10px, 5vw, 16px);