aspect-ratio 这个媒体特性可以用来判断可视窗口的宽度和高度的比例 … 下面通过几个演示来理解一下 …

打开资料包 xx-xx 里面的 xxx.html … 这是一种简单的网页 … 有两行文字 … 并且应用了一些基本的样式 … 黑色的背景 … 白色的文字 …

先回到这个网页项目 …. 找到网页链接使用的 sytle.css 这个样式表 …

媒体查询

这里我们使用直接在样式表里定义媒体查询的方法 …

输入 @meida () {} … 小括号里可以设置媒体查询的表达式 … 大括号里可以设置样式 …

在小括号里输入 aspect-ratio: 3/2 …

aspect-ratio 是可视窗口的宽度与高度比例这个媒体特性 … 它的值是两个整数，中间用一个斜线分隔开 …

前面的整数是宽度比 … 后面这个整数是高度比 ..

这个媒体查询的意思就是，如果设备的可视窗口的比例是 3:2 的时候 … 就会应用在后面大括号里设置的样式 …

这个媒体特性也支持 max 和 min 前缀 … 所以你可以去设置小于等于或者大于等于的 宽度与高度的比例 …

我们可以设置一下 body 标签的样式 … 把背景的颜色设置成一种蓝色 …

body{
background:#0381bb;
}

保存一下 … 下面我们可以去测试一下 … 这里我们用 iOS 的模拟器打开网页 … 现在我们用的这个设备，在垂直方向的时候，宽度与高度的比例是 2:3 ..

不过这个比例是设备的宽高比，并不是可视窗口的比例 … 现在的可视窗口是黑色背景这一块 …

我们可以把它调整成水平方向 … 背景颜色仍然没有改变 … 因为现在可视窗口的比例还不是 3/2 …

因为现在屏幕上除了显示页面内容，屏幕上还会显示浏览器的工具栏，地址栏 … 搜索 这些东西 …

所以去除这些元素以外，宽度和高度的比例就不是 3：2 了 …

我们可以点击这个全屏幕的按钮 … 你会发现 .. 页面的背景就会变成蓝色 ….

因为，现在是全屏幕的状态，所以可视窗口的比例跟水平方向的屏幕的宽高比是一样的 .. 宽是 480px … 高是 320 px 。换算成比例的话就是 3:2 …

所以页面也就会使用我们为这个比例设置的样式 …