7.1 Функція min()
Функція min() повертає найменше значення зі списку аргументів. Це корисно для встановлення значень, які не перевищують визначеного ліміту.
Синтаксис:
селектор {
властивість: min(value1, value2 ...);
}
Приклад використання:
У цьому прикладі ширина блоку буде не більше 300 пікселів, але якщо 100% батьківського елемента менше 300 пікселів, буде використано значення 100%:
/* Ширина блоку не більше 300px, але не менше 100px */
.block {
width: min(300px, 100%);
}
Приклад 2: Обмеження розміру шрифту
У цьому прикладі розмір шрифту буде не більше 2em, але якщо 5% від ширини вікна перегляду менше, буде використано це значення:
.text {
font-size: min(2em, 5vw);
}
7.2 Функція max()
Функція max() повертає найбільше значення зі списку аргументів. Це корисно для встановлення значень, які не опускаються нижче визначеного ліміту.
Синтаксис:
селектор {
властивість: max(value1, value2, ...);
}
Приклад використання
У цьому прикладі ширина блоку буде не менше 200 пікселів, але якщо 50% ширини батьківського елемента більше 200 пікселів, буде використано значення 50%:
/* Ширина блоку не менше 200px, але може бути більше */
.block {
width: max(200px, 50%);
}
Приклад 2: Мінімальний розмір шрифту
У цьому прикладі розмір шрифту буде не менше 1.5em, але якщо 2% від ширини вікна перегляду більше, буде використано це значення:
.title {
font-size: max(1.5em, 2vw);
}
7.3 Функція clamp()
Функція clamp() повертає значення, обмежене мінімальним і максимальним значеннями. Вона приймає три аргументи: мінімальне значення, переважне значення і максимальне значення.
Синтаксис:
селектор {
властивість: clamp(min, вираз, max);
}
Приклад використання
У цьому прикладі розмір шрифту буде змінюватися в залежності від ширини вікна перегляду: мінімально 12 пікселів, максимально 24 пікселі, а переважне значення — 2% від ширини вікна:
/* Шрифт розміром від 12px до 24px, в залежності від ширини екрану */
.text {
font-size: clamp(12px, 2vw, 24px);
}
Приклад 2: Обмеження ширини блоку
У цьому прикладі ширина блоку буде змінюватися в залежності від ширини батьківського елемента, але не менше 200 пікселів і не більше 600 пікселів:
.box {
width: clamp(200px, 50%, 600px);
}
7.4 Приклад повної реалізації
.container {
display: flex;
flex-direction: column;
gap: 20px;
padding: 20px;
}
.box {
background-color: #3498db;
color: white;
padding: 10px;
text-align: center;
width: clamp(200px, 50%, 600px);
}
.text {
font-size: clamp(1em, 2vw, 2em);
}
.sidebar {
background-color: #2ecc71;
color: white;
padding: 10px;
text-align: center;
width: max(200px, 30%);
}
.text-small {
font-size: min(2em, 5vw);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Приклад використання функцій min(), max() і clamp()</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<div class="box">Ширина: clamp(200px, 50%, 600px)</div>
<p class="text">Розмір шрифту: clamp(1em, 2vw, 2em)</p>
<div class="sidebar">Ширина: max(200px, 30%)</div>
<p class="text-small">Розмір шрифту: min(2em, 5vw)</p>
</div>
</body>
</html>
ПЕРЕЙДІТЬ В ПОВНУ ВЕРСІЮ