189 8069 5689
这篇文章给大家分享的是有关CSS中的比较函数有哪些的内容。小编觉得挺实用的，因此分享给大家做个参考。一起跟随小编过来看看吧。
创新互联是一家专业提供墨竹工卡企业网站建设,专注与成都网站制作、成都做网站、html5、小程序制作等业务。10年已为墨竹工卡众多企业、政府机构等服务。创新互联专业网站制作公司优惠进行中。
CSS比较函数有三个：
max()
min()
clamp()
CSS min,max函数作用类似于js函数中的min,max，用于取多个属性中的最小值或者较大值，属性之间用逗号分隔。例子如下
width: min(100px,200px,300px); //取值100px height: max(100px,200px,300px); //取值300px
如图，宽度取了最小值100px,高度取了较大值300px.
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的计算公式进行计算，下面验证一下
可以看出这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%);
}感谢各位的阅读！关于CSS中的比较函数有哪些就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到吧！