Одна из моих любимых фишек современного CSS — это функция clamp.
В переводе — зажим. И это буквально то, что она делает: зажимает некое значение в пределах двух других.
Ну, например, выражение:
width: clamp(250px, 50vw, 600px);
...задаст по-умолчанию ширину блока в половину ширины экрана, но не меньше 250 пикселей и не больше шестиста.
Удобно? Ну, не то слово. Со шрифтами вообще великолепно выходит! Вот инструмент, например: https://t.me/htmlshit/902
Ну и пример с шириной: https://codepen.io/Ekaterina_Vu/pen/QWjxJvm
Но собрал я вас не совсем за этим. К сожалению, в средствах разработчика Chrome никак не возможно понять, какое же значение используется в данный момент.
Но уже в Chrome Canary и скоро и в стабильных DevTools 134 нас ждёт адекватная нотация! С зачёркнутыми неиспользуемыми значениями:
width: clamp(
Счастье есть, котаны!
#css #clamp #chrome