Математические функции CSS
Благодаря математическим функциям значения свойств в CSS могут быть математическими выражениями.
В этой главе рассматриваются четыре из них:
calc()max()min()clamp()
Функция CSS calc()
Используйте calc(), когда значение свойства должно быть результатом вычисления.
Поддерживаются операторы сложения (+), вычитания (-), умножения (*) и деления (/), а единицы измерения можно смешивать, например пиксели с процентами.
Пример
И ширина, и высота этого элемента <div> получены с помощью calc().
Результат: полная HTML-страница
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS calc() Function</title>
<style>
#div1 {
margin: auto;
width: calc(100% - 100px);
height: calc(30vh + 50px);
border: 1px solid black;
padding: 10px;
}
</style>
</head>
<body>
<h1>The calc() Function</h1>
<p>Use calc() to calculate the width and height of a div element:</p>
<div id="div1">This div has a width of calc(100% - 100px) and a height of calc(30vh + 50px).</div>
</body>
</html>
Синтаксис CSS
calc(expression)
Функция CSS max()
Из списка значений, разделённых запятыми, max() выбирает наибольшее и использует его для свойства.
Пример
Из значений 50% и 300px max() задаёт ширине #div1 большее.
Результат: полная HTML-страница
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS max() Function</title>
<style>
#div1 {
height: 100px;
width: max(50%, 300px);
border: 1px solid black;
padding: 10px;
}
</style>
</head>
<body>
<h1>The max() Function</h1>
<p>Use max() to set the width of the div to whichever value is largest, 50% or 300px:</p>
<div id="div1">This div has a width of max(50%, 300px). Resize the browser window to see the effect.</div>
</body>
</html>
Синтаксис CSS
max(value1, value2, ...)
Функция CSS min()
Из списка значений, разделённых запятыми, min() выбирает наименьшее и использует его для свойства.
Пример
Из значений 50% и 300px min() задаёт ширине #div1 меньшее.
Результат: полная HTML-страница
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS min() Function</title>
<style>
#div1 {
height: 100px;
width: min(50%, 300px);
border: 1px solid black;
padding: 10px;
}
</style>
</head>
<body>
<h1>The min() Function</h1>
<p>Use min() to set the width of the div to whichever value is smallest, 50% or 300px:</p>
<div id="div1">This div has a width of min(50%, 300px). Resize the browser window to see the effect.</div>
</body>
</html>
Синтаксис CSS
min(value1, value2, ...)
Функция CSS clamp()
Значение, которое реагирует на размер окна просмотра, но остаётся в заданных пределах, даёт clamp(): оно изменяется между минимумом, предпочтительным значением и максимумом.
Эти три значения также являются её параметрами и обрабатываются так:
- Предпочтительное значение между минимумом и максимумом используется как есть.
- Предпочтительное значение ниже минимума уступает минимальному значению.
- Предпочтительное значение выше максимума уступает максимальному значению.
Пример
font-size элемента <h2> равен 5vw и ограничен: не менее 1.5rem и не более 3rem. Элемент <div> тоже использует clamp(), и для font-size, и для ширины.
Результат: полная HTML-страница
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS clamp() Function</title>
<style>
h2 {
font-size: clamp(1.5rem, 5vw, 3rem);
}
div {
border: 1px solid green;
padding: 10px;
font-size: clamp(1rem, 2.5vw, 2rem);
width: clamp(200px, 50%, 600px);
}
</style>
</head>
<body>
<h1>The clamp() Function</h1>
<h2>This Heading Uses clamp()</h2>
<p>The h2 font-size is set to clamp(1.5rem, 5vw, 3rem). It will never be smaller than 1.5rem or larger than 3rem.</p>
<div>This div uses clamp() for both font-size and width. The font-size is clamp(1rem, 2.5vw, 2rem) and the width is clamp(200px, 50%, 600px). Resize the browser window to see the effect.</div>
</body>
</html>
Синтаксис CSS
clamp(min, preferred, max)