_ca657203-e544-4c43-a06e-4c124c8814af

clamp(), min() и max() — нужные функции CSS.

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 для создания адаптивных вёрсток, которые могут легко адаптироваться к разным размерам экранов и обеспечивать удобное отображение контента.

Комментарии закрыты.