今天无意发现自己写的公司项目404页面不兼容360浏览器,测试了一下IE和火狐、以及qq浏览器,发现了最终搞破坏的boss:min(),这时我又查询了一下can i use ,发现支持啊,除了ie之外都支持,难道说?...... 算了,令程序员都讨厌的360/ie,又多了一个QQ浏览器。

熟悉用过min()的人都应该知道这个css属性表示什么意思:根据当前设备分辨率,从多个值中取出最小的。不懂的可以看这篇文章:《CSS比较函数min()——比较得出多个值的最小值

所以,解决其产生的兼容问题,很简单,要么css媒体media查询兼容不适配的样式;要么就分解min,给一个弹性宽度,和一个最大宽度,就能解决问题了

兼容方式一:

img{width: min(100%,770px);width: 100%;max-width: 770px;}

兼容方式二:

img{width:770px}
@media screen and (max-width:768px){
   img{width: 100%;}
}

其实兼容还是很好的,尤其不用再写媒体查询,现在很喜欢这样的写法,还高大尚,还能解决样式冲突问题。关于can i use 的兼容结果,如下: