CSS比较函数min()——比较得出多个值的最小值
七娃博客655人阅读
我们在实现页面宽度的时候,小于一定尺寸时页面宽度100%,大于这个尺寸的时候就固定大小;或者这样描述:一个盒子,最大宽度不得超过1400px,屏幕分辨率小于1400px时页面宽度按100%布局。
常规css写法:
{ width:100%; max-width:1400px; }
{ width: min(1400px,100%); }
是不是看起来就高大上了起来?
注意:min(a,b,c...) 可有多个参数,渲染时自动计算比较多个动态参数中 最小的,作为最终值!
例如:min(20vw,100%)
理解起来有点别扭,就把min当成一个数值,里面的优先级最高,先进行比较就行了,谁小就用谁!
[…] 原始出处 、作者信息和本声明。否则将追究法律责任。 转载请注明来源: […]
[…] 今天无意发现自己写的公司项目404页面不兼容360浏览器,测试了一下IE和火狐、以及qq浏览器,发现了最终搞破坏的boss:min(),这时我又查询了一下can i use ,发现支持啊,除了ie之外都支持,难道说?…… 算了,令程序员都讨厌的360/ie,又多了一个QQ浏览器。 熟悉用过min()的人都应该知道这个css属性表示什么意思:根据当前设备分辨率,从多个值中取出最小的。不懂的可以看这篇文章:《CSS比较函数min()——比较得出多个值的最小值》 […]