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() ми забезпечуємо адаптивність ширини блоку з врахуванням заданого діапазону значень.

автор: Bond

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