7.1 函数 min()
函数 min() 返回参数列表中最小的值。这个在设定不超过某个限制的值时很有用。
语法：
选择器 {
属性: min(value1, value2 ...);
}
使用示例：
在这个例子中，块的宽度不超过300像素，但如果父元素的100%宽度小于300像素，则使用100%的值：
CSS
/* 块宽度不超过300px，但不少于100px */
.block {
width: min(300px, 100%);
}
示例2: 限制字体大小
在这个例子中，字体大小不会超过2em，但如果视口宽度的5%更小，就用这个值：
CSS
.text {
font-size: min(2em, 5vw);
}
7.2 函数 max()
函数 max() 返回参数列表中最大的值。这个在设定不低于某个限制的值时很有用。
语法：
选择器 {
属性: max(value1, value2, ...);
}
使用示例
在这个例子中，块的宽度不小于200像素，但如果父元素的50%宽度大于200像素，则使用50%的值：
CSS
/* 块宽度不小于200px，但可以更大 */
.block {
width: max(200px, 50%);
}
示例2: 最小字体大小
在这个例子中，字体大小不小于1.5em，但如果视口宽度的2%更大，就用这个值：
CSS
.title {
font-size: max(1.5em, 2vw);
}
7.3 函数 clamp()
函数 clamp() 返回一个在最小值和最大值之间的值。它接受三个参数：最小值，首选值和最大值。
语法：
选择器 {
属性: clamp(min, 表达式, max);
}
使用示例
在这个例子中，字体大小将根据视口宽度变化：最小12像素，最大24像素，首选值是视口宽度的2%：
CSS
/* 字体大小根据屏幕宽度变化，从12px到24px */
.text {
font-size: clamp(12px, 2vw, 24px);
}
示例2: 限制块宽度
在这个例子中，块的宽度根据父元素的宽度变化，但不少于200像素且不超过600像素：
CSS
.box {
width: clamp(200px, 50%, 600px);
}
7.4 完整实现示例
CSS
.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);
}
HTML
<!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>
GO TO FULL VERSION