CSS比较函数min()——比较得出多个值的最小值

我们在实现页面宽度的时候,小于一定尺寸时页面宽度100%,大于这个尺寸的时候就固定大小;或者这样描述:一个盒子,最大宽度不得超过1400px,屏幕分辨率小于1400px时页面宽度按100%布局。

《CSS比较函数min()——比较得出多个值的最小值》

常规css写法:

{
	width:100%;
	max-width:1400px; 
}

用比较函数min()的话:

{
width: min(1400px,100%);
}

是不是看起来就高大上了起来? 

注意:min(a,b,c…) 可有多个参数,渲染时自动计算比较多个动态参数中 最小的,作为最终值!

例如:min(20vw,100%)
理解起来有点别扭,就把min当成一个数值,里面的优先级最高,先进行比较就行了,谁小就用谁!

版权声明:原创作品,允许转载,转载时请务必以超链接形式标明文章
原始出处 、作者信息和本声明。否则将追究法律责任。 转载请注明来源:
CSS比较函数min()——比较得出多个值的最小值
Qui-Note

    原文作者:兔子敲代码
    原文地址: https://blog.csdn.net/qq_38499671/article/details/111994367
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞