美文网首页
2021-02-20

2021-02-20

作者: 奶茶和亮亮 | 来源:发表于2021-02-20 11:50 被阅读0次

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

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

min-aspect-ratiomax-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.避免样式覆盖,最好把大比例的媒体查询写在后面

相关文章

网友评论

      本文标题:2021-02-20

      本文链接:https://www.haomeiwen.com/subject/zoptfltx.html