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函数相干的货色，欢送各位继续关注，源码在这，戳这里戳这里