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>
ПЕРЕЙДИТЕ В ПОЛНУЮ ВЕРСИЮ