7.1 min() Function
The min() function returns the smallest value from a list of arguments. This is handy for setting values that shouldn't exceed a certain limit.
Syntax:
selector {
property: min(value1, value2 ...);
}
Usage Example:
In this example, the block's width will not exceed 300 pixels, but if 100% of the parent element is less than 300 pixels, the 100% value will be used:
/* The block width is no more than 300px, but no less than 100px */
.block {
width: min(300px, 100%);
}
Example 2: Limiting Font Size
In this example, the font size will be no more than 2em, but if 5% of the viewport width is smaller, that value will be used:
.text {
font-size: min(2em, 5vw);
}
7.2 max() Function
The max() function returns the largest value from a list of arguments. This is useful for setting values that shouldn't fall below a certain limit.
Syntax:
selector {
property: max(value1, value2, ...);
}
Usage Example
In this example, the block's width will be at least 200 pixels, but if 50% of the parent element's width is greater than 200 pixels, the 50% value will be used:
/* The block width is no less than 200px, but can be more */
.block {
width: max(200px, 50%);
}
Example 2: Minimum Font Size
In this example, the font size will be no less than 1.5em, but if 2% of the viewport width is larger, that value will be used:
.title {
font-size: max(1.5em, 2vw);
}
7.3 clamp() Function
The clamp() function returns a value clamped between a set minimum and maximum value. It takes three arguments: the minimum value, the preferred value, and the maximum value.
Syntax:
selector {
property: clamp(min, expression, max);
}
Usage Example
In this example, the font size will change based on the viewport width: minimally 12 pixels, maximally 24 pixels, with a preferred value of 2% of the viewport width:
/* Font size from 12px to 24px, depending on screen width */
.text {
font-size: clamp(12px, 2vw, 24px);
}
Example 2: Limiting Block Width
In this example, the block's width will change depending on the parent element's width, but not less than 200 pixels and not more than 600 pixels:
.box {
width: clamp(200px, 50%, 600px);
}
7.4 Full Implementation Example
.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>Example of using min(), max(), and clamp() functions</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<div class="box">Width: clamp(200px, 50%, 600px)</div>
<p class="text">Font size: clamp(1em, 2vw, 2em)</p>
<div class="sidebar">Width: max(200px, 30%)</div>
<p class="text-small">Font size: min(2em, 5vw)</p>
</div>
</body>
</html>
GO TO FULL VERSION