CSS clamp() — значення між мінімумом і максимумом
Опис
автор: Bond
Загальний опис
автор: NagarD
- Порада
-
Використовуйте функцію
автор: Bondclamp()для створення адаптивних макетів, де значення властивостей залежать від розмірів екрану або батьківських елементів. - Порада
-
Зверніть увагу, що функцію
автор: Bondclamp()можна комбінувати з іншими функціями та математичними операціями, щоб отримати більш складені вирази.
Синтаксис
clamp(<min>, <preferred>, <max>);Функція clamp може отримувати 2 значень:
-
<number> -
Числові значення, які можуть бути вказані з одиницями вимірювання, такими як пікселі (
автор: Bondpx), відсотки (%),emабоrem. -
<expression> -
Ви можете використовувати будь-який допустимий CSS вираз, такий як
автор: Bondcalc(),var(),rgba(), і так далі, які повертають числові значення.
Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 79 | 75 | 13.1 | 66 | 79 | — |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 79 | 79 | 79 | 13.4 |
Приклади
+ запропонувати свій приклад у пісочниці
Наведіть курсор на елемент, щоб побачити зміну його розмірів.
HTML
<div id="description">
<h2>Приклад 1: зміна розмірів</h2>
<p>Наведіть курсор на елемент, щоб побачити зміну його розмірів.</p>
</div>
<div id="result">
<div class="box"></div>
</div>CSS
#description {
background-color: #f1f1f1;
padding: 20px;
font-family: Arial, sans-serif;
}
#result {
display: flex;
justify-content: center;
align-items: center;
height: 300px;
}
.box {
width: 200px;
height: 200px;
background-color: #ff6f61;
transition: width 0.3s, height 0.3s;
}
.box:hover {
width: clamp(100px, 50%, 300px);
height: clamp(100px, 50%, 300px);
}Один і той самий width: clamp(120px, 50%, 200px) у вузькому та широкому контейнері. У вузькому 50% дає менше за мінімум — спрацьовує 120px (блок ширший за половину батька), у широкому 50% перевищує максимум — спрацьовує 200px. Сірий блок поруч показує чисті 50% без обмежень.
HTML
<p>Контейнер 240px — 50% менше за мінімум, тож ширина 120px:</p>
<div class="parent narrow">
<div class="box">clamp</div>
<div class="plain">50%</div>
</div>
<p>Контейнер 640px — 50% більше за максимум, тож ширина 200px:</p>
<div class="parent wide">
<div class="box">clamp</div>
<div class="plain">50%</div>
</div>CSS
body {
font-family: sans-serif;
font-size: 15px;
line-height: 1.45;
padding: 24px;
}
.parent {
padding: 10px;
margin-bottom: 18px;
border: 1px dashed #9aa4ae;
}
.narrow {
width: 240px;
}
.wide {
width: 640px;
}
.box,
.plain {
padding: 10px;
margin-bottom: 8px;
color: #fff;
white-space: nowrap;
}
.box {
width: clamp(120px, 50%, 200px);
background: #2f6f9f;
}
.plain {
width: 50%;
background: #8a94a0;
}Використання функції clamp() для зміни розмірів елементa.
HTML
<div id="description">
<h2>Приклад 2: колорові та розмірні варіації</h2>
<p>Використання функції clamp() для зміни розмірів елемента.</p>
</div>
<div id="result">
<div class="box"></div>
<div class="box with-clamp"></div>
</div>CSS
#description {
background-color: #f1f1f1;
padding: 20px;
font-family: Arial, sans-serif;
}
#result {
display: flex;
justify-content: center;
align-items: center;
height: 200px;
}
.box {
width: 200px;
height: 200px;
background-color: #ff6f61;
margin-right: 20px;
}
.with-clamp {
width: clamp(100px, 50%, 300px);
height: clamp(100px, 50%, 300px);
background-color: #5cb85c;
}Коментарі
Коментарів ще немає — будьте першим!