На этой неделе я хочу поближе познакомить вас с функциями min (), max () и clamp (). Я все время слышу о clamp () , но я никогда не использовал её в производственной среде, и хотя это относительно новые функции, на данный момент они чертовски хорошо поддерживаются браузером, поэтому полезно сразу перейти к ним.
Во-первых: функция min () выбирает наименьшее из значений, которые вы ей передаете. Итак, если бы мы написали что-то вроде этого:
div {
width: min(700px, 80%);
}
Этот div будет иметь размер 700 пикселей, если это значение меньше 80%. Другой способ - это то же самое, что написать следующее:
div {
width: max(700px, 80%);
}
Тогда какое из этих двух значений будет наибольшим, это значение выберет функция. Или вы могли бы написать это так:
div {
width: 80%;
min-width: 500px;
}
Поэтому было бы полезно рассматривать эти функции как сокращенное средство для установки min-width и max-width. За исключением того, что вам не нужно устанавливать эти функции по ширине, вы можете использовать их практически везде, где захотите.
А что насчет clamp ()? Ну, он принимает три значения: минимальное, максимальное и предпочтительное значение. Популярное использование с font-size:
body {
font-size: clamp(1.1rem, 1vw + 1.1rem, 2.5rem);
}
Перевод: «Я хочу, чтобы размер текста был минимум 1,1 rem и максимум 2,5 rem . Попытайтесь установить размер шрифта с расчетом 1,1 rem плюс 1% от размера области просмотра, но ограничьте его 2,5 rem на верхнем уровне и 1,1 rem на нижнем ».
Выглядит это примерно так:
Это дает браузеру команду изменить размер шрифта в зависимости от ширины области просмотра, но также, что особенно важно, позволяет нам иметь минимальный размер шрифта для удобочитаемости. Это фантастика, потому что мы получаем гораздо больше контроля над размером шрифта при разработке дизайна. Скажем, мне нужен другой размер шрифтов на маленьких экранах. С clamp () мы можем это сделать.
У меня есть ощущение, что эти функции, вероятно, будут использоваться в множестве мест, помимо простой установки размера и ширины шрифта, но даже если это не так - clamp () дает нам эту новую суперспособность, которую мы никогда не использовали раньше. И это чертовски интересно.
Возможно вам известны новые возможности данной функции. Делитесь в комментах.
