device-aspect-ratio与aspect-ratio介绍

12806次浏览

前言

本文很简单,就是介绍2个属性,增加点博客人气,好久没有更新博客了。中国疫情基本控制住了,世界疫情又来了,中国加油,世界加油! 本文2个属性,一个是device-aspect-ratio 一个是aspect-ratio,都是宽高比率。

device-aspect-ratio

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

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

举例:

@media screen and (device-aspect-ratio:4/3){ … }
@import url(haorooms.css) screen and (min-device-aspect-ratio:4/3);

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-ratio和min-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真实的表现是“小于等于”和“大于等于”。

同样的,如果我们想要使用min-aspect-ratio来设置不同的尺寸的,那么也要注意一点,要把大比例的写在后面,就比如:1/1,3/4,9/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的话,那就不要再使用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,就会执行
}

相关文章: