CSS比较函数一共有三个：max()min()clamp()min和maxCSSmin，max函数类似于js函数中的min和max，是用于取多个属性中的最小值或最大值，以逗号分隔。示例如下width:min(100px,200px,300px);//值为100pxheight:max(100px,200px,300px);//如图所示值为300px，最小宽度为100px，最大高度为300px.clampclamp函数需要传入3个参数，一个最小值，一个默认值，一个最大值，分别是用于处理边界值。默认值大于最大值时取最大值，小于最小值时取最小值。Between当介于min和max之间时，取默认值。使用方法clamp(MIN,DEFAULT,MAX)clamp相当于max(MIN,min(DEFAULT,MAX))casefont-size:clamp(20px,10vw,40px);分析下，当10vw小于20px时，即页面宽度小于等于200px时，最小字体为20px。当10vw大于40px，即页面宽度大于等于400px时，最大字体为40px。如果在200px-400px之间，则按照width/10的计算公式计算，如下验证小于200px和大于400px200px到400px的兼容性。可以看出这三个功能是最近才出来的，所以兼容性不是很好。国内所有浏览器都链接了，主流浏览器最新版本基本都能支持。这是好事，因为这三个数学在响应式开发中的作用还是很明显的。未来这三个功能在响应式开发中的占比可能会逐渐增加。常见使用场景下面将列举几种常见的使用场景。侧边栏响应对于侧边栏布局，需要固定宽度的侧边栏。在做responsive的时候，可以使用vw来固定超过最大宽度时侧边栏的比例。除了{背景：#ccc;弹性基础：最大（30vw，150px）；}main{背景：#09acdd；弹性增长：1；}字体响应是夹住最大值和最小值，然后中间的默认值根据窗口font-size变化：clamp(20px,10vw,40px);GradientsmoothtransitionGradient指定渐变的渐变线。按照一般的操作，过渡会不够流畅，在移动端会有明显的过渡线。背景：线性渐变（135deg，#2c3e50，#2c3e50，#3498db）；用min修改，过渡会更平滑背景：linear-gradient(135deg,#2c3e50,#2c3e50min(20vw,60%),#3498db);dynamiccontainerwidth在实践中，比如我们想在桌面端限制宽度，在移动端显示100%，我们需要这样写.container{width:1440px;最大宽度：100%；}现在我们只需要.container{width:min(1440px,100%);}非常简洁明了。综上所述，这三个函数适合响应式布局的开发，在不考虑兼容性问题的情况下可以酌情使用，但如果要考虑兼容性问题最好不要使用。最近在总结css函数相关的东西。欢迎您继续关注。源代码在这里。戳这里戳这里。
