CSS function clamp

Опис

clamp() - функція в CSS, яка дозволяє встановлювати динамічні значення властивостей залежно від різних умов. Вона дозволяє обмежити властивість значеннями в заданому діапазоні. Це корисний інструмент для створення адаптивних та гнучких макетів на веб-сайті.

Функція clamp() приймає три параметри: preferred, min і max. Значення властивості буде обчислюватися наступним чином:

• Якщо preferred значення знаходиться між min і max, то результатом буде preferred значення;
• Якщо preferred значення менше min, то властивість прийматиме значення min;
• Якщо preferred значення більше max, то властивість прийматиме значення max.

Приклад використання:

Допустимо, у нас є блок зі шириною 600px, але ми хочемо, щоб його ширина змінювалася залежно від розмірів екрану, але при цьому не менше 300px і не більше 800px. Ми можемо використати функцію clamp() для цього:

width: clamp(300px, 50%, 800px);

У цьому прикладі, якщо ширина батьківського елемента буде більше 1200px, то ширина блоку буде становити 600px (50% від 1200px). Але якщо ширина батьківського елемента буде менше 600px, то ширина блоку буде фіксованою і дорівнюватиме 300px. Таким чином, за допомогою clamp() ми забезпечуємо адаптивність ширини блоку з врахуванням заданого діапазону значень.

правити

Порада

Використовуйте функцію clamp() для створення адаптивних макетів, де значення властивостей залежать від розмірів екрану або батьківських елементів.

автор: Bond правити

Порада

Зверніть увагу, що функцію clamp() можна комбінувати з іншими функціями та математичними операціями, щоб отримати більш складені вирази.

автор: Bond правити

+ додати пораду чи нотатку

Синтаксис

clamp(<min>, <preferred>, <max>);

Функція clamp може отримувати 2 значень:

<number>

Числові значення, які можуть бути вказані з одиницями вимірювання, такими як пікселі (px), відсотки (%), em або rem.

автор: Bond

правити

<expression>

Ви можете використовувати будь-який допустимий CSS вираз, такий як calc(), var(), rgba(), і так далі, які повертають числові значення.

автор: Bond

правити

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	79	75	13.1	66	79	—

Підтримка: мобільні переглядачі

Переглядач
	79	79	79	13.4

Приклади

+ запропонувати свій приклад у пісочниці