2021-02-20

css新属性  aspect-ratio  使用宽/高比进行页面适配

aspect-ratio：CSS 媒体属性 可以用来测试viewport的宽高比。

min-aspect-ratio和max-aspect-ratio分别查询最小和最大的值。

例如：

最大宽高比在1689/957之内字体为红色

@media screen and (aspect-ratio:1680/957){

   div{

     color:red;

   }

}

最大宽高比在720/90之内字体为蓝色

@media screen and (aspect-ratio:720/90){

   div{

     color:blue;

   }

}

注意：

1.宽高比不能直接写小数

2.在less中使用宽高比会编译成小数，可以在比值前面加一个  ~ 

3.避免样式覆盖，最好把大比例的媒体查询写在后面