device-aspect-ratio 跟前面我们介绍的 aspect-ratio 不太一样 … 它可以去判断设备的宽度和高度的比例 ..

device 就是设备的意思 … aspect ratio 是宽高比 …

下面我们还是通过演示来理解一下这个媒体特性 …

我们可以使用之前网页项目 … 打开 style.css 样式表 … 设置媒体查询的方法是一样的 …

这里我们把括号里的 aspect-ratio … 修改成 device-aspect-ratio … 这个媒体特性同样支持在前面添加 max 和 min 的前缀。

后面的值的类型是一样的 … 两个整数，分别表示宽度比和高度比 … 中间用一个斜线分隔开 …

保存一下 … 打开浏览器 …

我们可以把可视窗口的宽度与高度的比例修改成 3:2 .. 这里我们用的是 chrome 浏览器的 web developer 插件 …

修改窗口尺寸 … 宽度设置为 960 像素 … 高度设置成 712 像素 …. 注意这里我们设置的是窗口的尺寸，而不是可视窗口的尺寸 …

窗口的尺寸会包含浏览器的标签栏 … 地址栏 … 这些东西

高度我们设置成为 712 像素 … 去掉浏览器标签栏和工具栏的 72 像素的高度 … 可视窗口的高度会是 640 像素 …

960 / 640 … 换算一下 … 可视窗口的宽高比应该是 3:2 ….

当我们设置成了这个尺寸以后 … 背景并没有变成蓝色… 因为我们使用的是 device-aspect-ratio 这个媒体特性 …

它会查询设备的屏幕的整体的宽高比 … 而不是可视窗口的宽高比 …

我的电脑的屏幕分辨率是 1440 x 900 … 宽高比应该是 16:9 … 所以不会应用媒体查询里设置的当设备的 屏幕宽高比是 3:2 时候的 样式 …

下面我们再用 iOS 模拟器打开网页 … 调整成水平方向 .. 全屏幕 … 这里仍然没有应用蓝色背景样式 …

因为当前我们使用的这个设备的宽与高的比例是 2:3 …. 这个比例不会受到设备使用方向的影响 …

回到样式表 … 我们把比例的值修改成 2:3 … 保存 …

回到 iOS 模拟器 … 刷新 ..

现在页面会使用我们设置的当设备的宽高比是 2:3 的时候的样式了 …

调整成垂直方向 … 同样会使用这个蓝色背景 …