共计 1313 个字符，预计需要花费 4 分钟才能阅读完成。
CSS 比拟函数有三个：
- max()
- min()
- clamp()
min 与 max
CSS min,max 函数作用相似于 js 函数中的 min,max，用于取多个属性中的最小值或者最大值，属性之间用逗号分隔。例子如下
width: min(100px,200px,300px); // 取值 100px
height: max(100px,200px,300px); // 取值 300px
如图，宽度取了最小值 100px, 高度取了最大值 300px.
clamp
clamp 函数须要传入 3 个参数，一个最小值，一个默认值，一个最大值，用于解决边界值，当 默认值 大于最大值时，取最大值，小于最小值时，取最小值，介于最小与最大之间时，取默认值。
应用办法
clamp(MIN,DEFAULT,MAX)
clamp 就相当于max(MIN,min(DEFAULT,MAX))
案例
font-size: clamp(20px,10vw,40px);
剖析下，当 10vw 小于 20px，也就是页面宽度小于等于 200px 时，字体最小为 20px, 当 10vw 大于 40px, 也就是页面宽度大于等于 400px 时，字体最大为 40px. 处于 200px-400px 之间的，则依照 width/10 的计算公式进行计算，上面验证一下
小于 200px
大于 400px
200px 到 400px 之间
兼容性
能够看出这 3 个函数都是最近不久才进去的，所以兼容性不太好，国产浏览器全挂，支流浏览器最新的版本根本可能反对，这是个坏事，因为这三个数学在响应式开发中的作用还是很显著的，将来或者这 3 个函数在响应式开发中的比重会缓缓的失去晋升。
罕用的应用场景
上面会列举几个罕用的应用场景
侧边栏响应
对于侧边栏布局，须要侧边栏固定宽度，做响应式时能够思考超过最大宽度时通过 vw 来固定侧边栏的占比
aside {
background: #ccc;
flex-basis: max(30vw, 150px);
}
main {
background: #09acdd;
flex-grow: 1;
}
字体响应
通过 clamp 限度最大最小值，而后两头的默认值依据视窗扭转
font-size: clamp(20px, 10vw, 40px);
突变平滑过渡
突变指定突变的梯度线，依照个别操作会呈现过渡不够平滑的状况，在挪动端会有一条显著的过渡线
background: linear-gradient(135deg, #2c3e50, #2c3e50, #3498db);
利用 min 批改一下，过渡会更加平滑一点
background: linear-gradient(135deg, #2c3e50, #2c3e50 min(20vw, 60%), #3498db);
动静容器宽度
在理论使用中，比方如果咱们想在桌面端限定宽度，在挪动端显示 100%，须要这样写
.container{
width: 1440px;
max-width: 100%;
}
当初只须要
.container{width: min(1440px,100%);
}
十分简洁明了。
总结
这 3 个函数实用于响应式布局的开发，在不须要思考兼容性问题的状况下能够酌情应用，但如果要思考兼容性，还是最好不要应用。我最近在总结 css 函数相干的货色，欢送各位继续关注，源码在这，戳这里戳这里
