CSS свойства clamp, min, и max предоставляют возможность создавать адаптивные вёрстки, которые могут легко подстраиваться под различные размеры экранов. Давайте начнем с описания каждого из этих свойств, укажем версии поддержки браузерами и предоставим базовые примеры использования.
CSS clamp ()
Свойство clamp позволяет задавать значение, которое будет находиться между минимальным и максимальным значениями. Синтаксис clamp(min, preferred, max) означает, что значение будет выбрано в диапазоне от min до max, но по возможности будет равно preferred.
Пример использования clamp:
<code>font-size: clamp(16px, 5vw, 24px);В этом примере, размер шрифта будет равен 5% ширины экрана, но не менее 16px и не более 24px.
CSS min ()
Свойство min используется для установки минимального значения для свойства. Синтаксис min(value1, value2) означает, что значение будет равно максимуму из value1 и value2.
Пример использования min:
<code>width: min(50%, 300px);В этом примере, ширина элемента будет равна максимуму из 50% ширины родительского контейнера и 300px.
CSS max ()
Свойство max используется для установки максимального значения для свойства. Синтаксис max(value1, value2) означает, что значение будет равно минимуму из value1 и value2.
Пример использования max:
<code>height: max(200px, 30%);В этом примере, высота элемента будет равна минимуму из 200px и 30% высоты родительского контейнера.
Поддержка браузерами:
Cвойства clamp, min, и max были работают в современных браузерах, включая Chrome (от 79 версии, декабрь 2019 года), Firefox (от 75 версии, апрель 2020 года), Safari (от версии 11.1 вышедшая в марте 2018) и Edge(от 79 версии, ноябрь 2019).
Примеры адаптивной вёрстки:
1. Адаптивный текст:
<code>font-size: clamp(16px, 5vw, 24px);В этом примере, текст будет автоматически масштабироваться от 16px до 24px в зависимости от ширины экрана. Минимальный размер 16px будет обеспечивать читаемость, а максимальный размер 24px — улучшенное сопоставление с большими экранами.
2. Адаптивная ширина элемента:
<code>width: min(50%, 300px);Этот код делает ширину элемента равной максимуму из 50% ширины родительского контейнера или 300px. Это обеспечивает гибкую адаптивность элемента к разным размерам экранов.
3. Адаптивная высота элемента:
<code>height: max(200px, 30%);В этом примере, высота элемента равна минимуму из 200px и 30% высоты родительского контейнера. Это позволяет элементу быть не выше 30% высоты экрана, при этом не менее 200px, чтобы обеспечить адекватное отображение на маленьких экранах.
Эти простые примеры демонстрируют, как можно использовать свойства clamp, min и max для создания адаптивных вёрсток, которые могут легко адаптироваться к разным размерам экранов и обеспечивать удобное отображение контента.