寒假生活指导 09

动态尺寸控制：CSS min()/max() 函数
在响应式设计中，元素尺寸的动态平衡常需要媒体查询配合计算，而min()/max()数学函数提供了更直观的流体控制方案。这对函数能直接在样式声明中实现智能尺寸决策。

场景示例
侧边栏布局需要同时满足：
最小宽度不低于300px
最大宽度不超过屏幕30%
默认占用父容器20%宽度
传统方案需要多个媒体查询，现在只需一行代码：

.sidebar {
width: min(300px, max(20%, 30vw));
}

函数解析
min(a, b)：取较小值（建立上限）
max(a, b)：取较大值（建立下限）

支持嵌套使用和单位混算（px/%/vw等）

进阶技巧
字体动态缩放：
h1 {
font-size: max(2rem, min(5vw, 3rem));
}

安全间距控制：
.card {
padding: min(2rem, 5%) max(1rem, 3%);
}

优势对比
代码精简：减少50%以上的媒体查询代码
精准响应：像素与百分比的无缝衔接
未来兼容：适配容器查询等新特性时无需重构

对不支持浏览器可采用CSS变量降级：
.sidebar {
width: 20%;
min-width: 300px;
max-width: 30vw;
}

@supports (width: min(1px, 2px)) {
.sidebar {
width: min(300px, max(20%, 30vw));
}
}