数学函数
calc()/min()/max()/clamp() 动态计算、响应式数值
数学函数
CSS 数学函数让数值动态计算——告别硬编码像素值。
学完本章你将： 掌握 calc()/min()/max()/clamp()。
calc()
css
/* 动态计算 */
.sidebar {
width: calc(100% - 200px); /* 总宽减去侧边栏 */
}
.centered {
margin-left: calc(50% - 300px); /* 居中 */
}
.full-minus-padding {
width: calc(100% - 40px); /* 减去 padding */
}min() 与 max()
css
/* min()：取最小值 */
.responsive-width {
width: min(100%, 800px); /* 不超过 800px，也不超过屏幕 */
}
/* max()：取最大值 */
.min-height {
height: max(50vh, 300px); /* 至少占半屏，但不小于 300px */
}clamp()（最实用）
css
/* clamp(最小值, 首选值, 最大值) */
h1 {
font-size: clamp(1.5rem, 4vw, 3rem);
/* 最小 1.5rem，最大 3rem，中间按 4vw 变化 */
}
.container {
width: clamp(300px, 80%, 1200px);
/* 最小 300px，最大 1200px，中间 80% */
}
.card {
padding: clamp(10px, 2vw, 30px);
}对比总结
css
/* clamp() = max(最小值, min(首选值, 最大值)) */
clamp(MIN, VAL, MAX) 等价于 max(MIN, min(VAL, MAX))💡
clamp()是响应式单位的最佳选择——无需媒体查询。