专栏首页杰的记事本min-aspect-ratio和max-aspect-ratio宽高比自适应

min-aspect-ratio和max-aspect-ratio宽高比自适应

首先,移动端的适配,还是要先做好的,不管你是使用rem布局,还是使用media进行适配布局(只是单纯的宽度上),布局好了,这里只是宽度自适应了,如果是流式布局的话,这样就已经足够了,对于我们这里的单屏布局,就略显不足了。

所以这里就要用的:device-aspect-ratioaspect-ratio了。

一个一个的来说吧。

device-aspect-ratio

device-aspect-ratio 定义输出设备的屏幕可见宽度与高度的比率。

前缀是device,也能证明,这个属性是按照设备的尺寸来的,为什么单独说这个呢,因为不管是浏览器还是APP,所有的承载H5页面的容器,都有自己的header头以及最上面的手机时间功能显示的区域,一般这些内容,会占去120px(双倍屏上,这个数据可能不准,只是想说,会被这些占用设备可视区域的可用高度,如果你是在浏览器全屏的话,就当我没说这些啦)的高度。

所以,对于前端的开发者来开发单屏的页面的话,这个属性其实是不怎么会用到的。

同时,device-aspect-ratio还有两位两个兄弟属性,max-device-aspect-ratiomin-device-aspect-ratio,他们的兼容性在移动端,是可以不用去考虑的,绝大部分的移动端设备,都是支持的,在我看来,是可以直接放心使用的。

aspect-ratio

aspect-ratio 定义输出设备中的页面可见区域宽度与高度的比率

可视区域,这个对于我们来说,才是真正需要的。

直接就是上代码吧:

@media screen and (min-aspect-ratio: 9/16) {
    // 如果宽高比小于9:16的话,显示这个内容
 }

@media screen and (max-aspect-ratio: 9/16) {
    // 如果宽高比大于9:16的话,显示这个内容
 }

@media screen and (aspect-ratio: 9/16) {
    // 如果宽高比是9:16的话,显示这个内容
}

aspect-ratio的取值:width/height,即宽度与高度的对比

一般情况下,在PC端的是:width > height,在移动端的时候,width < height,所以,其实如何在移动端判断是否为横屏,也可以按照这个方式来判断。 如果直接设置:aspect-ratio:9/16,那么就表示,只要在width/height = 9/16的情况下,才会被触发,但是同一个手机,在APP和浏览器(甚至不同的浏览器),这个宽高比是不同的,如果单纯的设置一个固定的值,还是很难稳定的实现某些功能的,所以也就提供了:max-aspect-ratiomin-aspect-ratio。 max-aspect-ratio : 9/16 表示如果当前页面的width/height <= 9/16的话会被执行,max表现大于的时候,与max-width(表示最大的限制值)理论上是一样的概念,宽高比不大于这个值的时候。 同样的道理,min-aspect-ratio : 9/16表示,当宽高比大于等于这个值的时候,就会被执行。

这里有一点要注意,只要设置了max-aspect-ratio或者min-aspect-ratio,那么aspect-ratio就无效了,因为max-aspect-ratio或者min-aspect-ratio真实的表现是“小于等于”和“大于等于”。

所以,如果你只是要监听一个比例的变化,而且,你需要使用到:max-aspect-ratiomin-aspect-ratioaspect-ratio这三个属性的话,那么就要按照本小节的示例代码,把aspect-ratio写在最后面。

同样的,如果我们想要使用min-aspect-ratio来设置不同的尺寸的,那么也要注意一点,要把大比例的写在后面,就比如:1/13/49/16这三个比例的话,代码的实现部分就要:

@media screen and (min-aspect-ratio: 9/16) {
    // 只要宽高比大于等于9/16,就会执行
}

@media screen and (min-aspect-ratio: 3/4) {
    // 只要宽高比大于等于3/4,就会执行
}

@media screen and (min-aspect-ratio: 1/1) {
    // 只要宽高比大于等于1/1,就会执行
}

既然min-aspect-ratio的区域是大于等于,当前的设备比例已经固定(假设为cur),我需要设置三个比例A(3) > B(2) > C(1)。再加上CSS的层叠覆盖理论,后面定义的会覆盖前面的。

那么就会出现:如果cur > C,那么cur > B ,cur > A ,这个时候,如果C的CSS放在了最后面,那么无聊如何也不会执行到A和B了。

所以,要把大值(涵盖区域广的)放到最底部,这个也可也称之为小区域理论。

3 – 正无穷 2 – 正无穷 1 – 正无穷

虽然在数学上来说,这个差距微乎其微,但是真实的情况确实是,CSS文件中,定义的顺序为: C ,B,A,也就是我们前面的一段代码的定义顺序。(这个如果真的理解不了,其实也可以不理解,写好了,试一下就OK了啊~)(再加一个理解方法,取属性的前缀min,越小的越先定义)

但同时也有一点注意,如果需要使用多次min-aspect-ratio的话,那就不要再使用max-aspect-ratio了,肯定会冲突的。

同理,max-aspect-ratio的情况也是相同的,只是定义的顺序与min-aspect-ratio相反,max-aspect-ratio的定义顺序是,max前缀,越大的值越先定义,所以如果上述的一段代码使用max-aspect-ratio来实现的话就是:

@media screen and (max-aspect-ratio: 1/1) {
    // 只要宽高比小于等于1/1,就会执行
}

@media screen and (max-aspect-ratio: 3/4) {
    // 只要宽高比小于等于3/4,就会执行
}

@media screen and (max-aspect-ratio: 9/16) {
    // 只要宽高比小于等于9/16,就会执行
}

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • docker删除所有容器 镜像 数据卷等批量操作命令

    javascript.shop
  • 浏览器数据库 IndexedDB入门

    随着浏览器的功能不断增强,越来越多的网站开始考虑,将大量数据储存在客户端,这样可以减少从服务器获取数据,直接从本地获取数据。

    javascript.shop
  • PostgreSQL入门

    自从MySQL被Oracle收购以后,PostgreSQL逐渐成为开源关系型数据库的首选。

    javascript.shop
  • 「实战篇」开源项目docker化运维部署(终结篇)(11)

    有老铁问我,买电脑thinkpad还是mac,我强烈用建议使用mac,安装个docker环境,随时安装各种的容器,方便自己用,自己写写shell,美滋滋比win...

    IT故事会
  • 流媒体服务器播放H.265编码格式为什么不普及?

    我们都知道h.264编码,目前互联网主流的视频播放器播放的视频就是H.264编码,但是随着更新一代视频编码技术h.265编码诞生,其在同样画质和码率下相对占用的...

    EasyNVR
  • 顶级内衣模特业余时间干什么?编程!

    注:又到了女王节了,祝各位女王节日快乐咯 (*^__^*) 今天特别推荐女程序员相关的文章。

    疯狂的技术宅
  • DFS中的奇偶剪枝学习笔记

    奇偶剪枝学习笔记 描述 现假设起点为(sx,sy),终点为(ex,ey),给定t步恰好走到终点, s | ...

    Angel_Kitty
  • 挑战程序竞赛系列(75):4.3强连通分量分解(2)

    挑战程序竞赛系列(75):4.3强连通分量分解(2) 传送门:POJ 3180: The Cow Prom 题意: 求结点大于等于2的强连通分量个数。 直接上...

    用户1147447
  • 挑战程序竞赛系列(76):4.3强连通分量分解(3)

    挑战程序竞赛系列(76):4.3强连通分量分解(3) 传送门:POJ 1236: Network of Schools 题意: 校园网:给定N所学校和网络,目...

    用户1147447
  • Docker Jenkins

    jenkins: image: jenkins user: root volumes:

    用户5760343

扫码关注云+社区

领取腾讯云代金券