5.1 calc() 函数
CSS 函数提供有效的工具，可以直接在样式文件中执行各种操作。
calc()、min()、max() 和 clamp() 函数特别有用，它们可以创建响应式和灵活的设计，因为它们允许进行数学运算和条件计算。
calc() 函数用于在 CSS 中进行数学运算。它允许在一个表达式中组合不同的测量单位，如像素 (px)、百分比 (%)、em、rem 等。
语法：
选择器 {
属性: calc(表达式);
}
使用示例
在这个示例中，块的宽度被计算为父元素宽度的 50% 减去 20 像素：
CSS
/* 块的宽度是父元素的一半减去 20 像素 */
.block {
width: calc(50% - 20px);
}
5.2 min(), max() 和 clamp() 函数
CSS 中的 min()、max() 和 clamp() 函数
min() 函数
min() 函数接受多个值并返回其中最小的。它对于创建根据上下文变化的灵活尺寸很有用。
语法：
选择器 {
属性: min(值1, 值2);
}
示例
在这个示例中，容器的宽度将是 50% 或 300 像素，取决于哪个更小：
CSS
.container {
width: min(50%, 300px);
}
max() 函数
max() 函数接受多个值并返回其中最大的。它对于设置最小尺寸和保证适应性很有用。
clamp() 函数
clamp() 函数接受三个值：最小值、首选值和最大值。它限制值在最小和最大之间，倾向于首选值。
5.3 使用 CSS 函数的优势
使用 CSS 函数的优势：
- 灵活性。 CSS 函数让样式更灵活和响应式，因为它们能动态计算值。
- 简化响应式设计。
min()、max()和clamp()函数大大简化了响应式设计的创建，允许通过限制值来实现。 - 减少对媒体查询的需求。 使用这些函数可以减少根据不同屏幕尺寸调整样式所需的媒体查询数量。
5.4 完整实现示例
CSS
.container {
display: flex;
flex-direction: column;
gap: 10px;
padding: 20px;
}
.block {
background-color: #3498db;
color: white;
padding: 10px;
text-align: center;
}
.block:nth-child(1) {
width: calc(50% - 20px);
}
.block:nth-child(2) {
width: min(300px, 100%);
}
.block:nth-child(3) {
width: max(200px, 50%);
}
.text {
font-size: clamp(12px, 2vw, 24px);
}
HTML
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS 函数使用示例</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<div class="block">宽度为 calc(50% - 20px) 的块</div>
<div class="block">宽度为 min(300px, 100%) 的块</div>
<div class="block">宽度为 max(200px, 50%) 的块</div>
<p class="text">字体大小为 clamp(12px, 2vw, 24px) 的文本</p>
</div>
</body>
</html>
GO TO FULL VERSION