Эта страница переведена с помощью Cloud Translation API.

CSS min(), max() и зажим()

Узнайте, как контролировать размер элементов, поддерживать правильный интервал и реализовывать плавную типографику с помощью этих хорошо поддерживаемых функций CSS.

Una Kravets

Поскольку адаптивный дизайн становится все более тонким, CSS постоянно развивается, чтобы предоставить авторам больше контроля. Функции min() , max() и clamp() , которые теперь поддерживаются во всех современных браузерах, являются одними из новейших инструментов, позволяющих сделать веб-сайты и приложения более динамичными и отзывчивыми. Вы можете использовать эти функции для управления размером и изменением размера элементов, поддержания расстояния между элементами и создания гибкой и плавной типографики.

Математические функции calc() , min() , max() и clamp() позволяют использовать математические выражения со сложением (+), вычитанием (-), умножением (*) и делением (/) в качестве значений компонентов.
Значения CSS и единицы измерения, уровень 4

Поддержка браузера

`min()`

Поддержка браузера

Источник

`max()`

Поддержка браузера

Источник

`clamp()`

Поддержка браузера

Источник

Использование

Вы можете использовать min() , max() и clamp() в правой части любого выражения CSS, где это имеет смысл. Для min() и max() вы предоставляете список значений аргументов, и браузер определяет, какое из них является наименьшим или наибольшим. Например, в случае с width: min(1rem, 50%, 10vw) браузер вычисляет, какая из этих относительных единиц является наименьшей, и использует это значение для ширины элемента.

Функция min() выбирает минимальное значение из списка опций в этой демонстрации Codepen.

Функция max() делает то же самое для максимального значения.

Функция max() выбирает значение из списка опций в этой демонстрации Codepen.

Чтобы использовать clamp() , введите три значения: минимальное значение, идеальное значение для расчета и максимальное значение.

В этой демонстрации Codepen функция зажима() сохраняет свое значение между указанным минимумом и максимумом.

Вы можете использовать эти функции везде, где разрешены <length> длина>, <frequency> , <angle> , <time> , <percentage> , <number> или <integer> . Вы можете использовать их отдельно (как в font-size: max(0.5vw, 50%, 2rem) ) с помощью calc() (как в font-size: max(calc(0.5vw - 1em), 2rem) ) или составленный (как в font-size: max(min(0.5vw, 1em), 2rem) ).

Ниже приведены некоторые примеры использования этих функций.

Идеальная ширина

Согласно «Элементам типографского стиля » Роберта Брингхерста, «от 45 до 75 символов широко считаются удовлетворительной длиной строки для страницы с одной колонкой, набранной шрифтом с засечками и размером текста».

Чтобы обеспечить ширину текстовых блоков от 45 до 75 символов, используйте clamp() и модуль ch ( продвижение символов по 0-ширине):

p {
  width: clamp(45ch, 50%, 75ch);
}

Это позволяет браузеру определять ширину абзаца. По умолчанию ширина устанавливается на 50%. Если 50% меньше 45ch , вместо ширины используется 45ch , а если 50% шире, чем 75ch , используется 75ch .

Используйте функцию зажима(), чтобы установить минимальную и максимальную ширину. См. Демо на Codepen.

Вы также можете разбить это, используя только min() или max() . Если вы хотите, чтобы элемент всегда имел ширину 50% и не превышал 75ch на больших экранах, используйте width: min(75ch, 50%); чтобы установить максимальный размер.

Используйте функцию min(), чтобы установить максимальную ширину.

Таким же образом вы можете установить минимальный размер разборчивого текста с помощью функции max() , как и в случае с width: max(45ch, 50%); . Здесь браузер выбирает большее значение, то есть размер элемента должен быть 45ch или шире.

Используйте функцию max(), чтобы установить минимальную ширину.

Управление заполнением

Вы также можете использовать max() чтобы установить минимальный размер заполнения. Этот пример взят из CSS Tricks , где читатель Калуан де Ласерда Патака поделился этой идеей: пусть элемент имеет дополнительные отступы при больших размерах экрана, но сохраняет минимальное отступы при меньших размерах экрана. Для этого используйте calc() или max() и вычтите минимальное дополнение с обеих сторон элемента: calc((100vw - var(--contentWidth)) / 2) или max(2rem, 50vw - var(--contentWidth) / 2) . В вашей таблице стилей это должно выглядеть так:

footer {
  padding: var(--blockPadding) max(2rem, 50vw - var(--contentWidth) / 2);
}

Установите минимальное дополнение для компонента с помощью функции max(). См. Демо на Codepen.

Плавная типографика

Чтобы обеспечить плавную типографику , Майк Ритмейллер популяризировал метод, который использует функцию clamp() для установки минимального и максимального размера шрифта и обеспечения масштабирования между этими размерами.

Используйте зажим() для создания плавной типографики. См. Демо на Codepen.

До clamp(), для проектирования масштабирования шрифтов требовались строки сложного стиля. Теперь вы можете позволить браузеру сделать всю работу за вас. Установите минимально допустимый размер шрифта (например, 1.5rem для заголовка), максимальный размер (например, 3rem ) и идеальный размер (например, 5vw ). Теперь у вас есть типографика, которая масштабируется вместе с шириной области просмотра страницы до тех пор, пока не достигнет предельного минимального и максимального значений, используя очень мало кода:

p {
  font-size: clamp(1.5rem, 5vw, 3rem);
}

Больше ресурсов

Изображение на обложке от @yer_a_wizard на Unsplash.