aspect-ratio 可视窗口宽与高的比例

0
视频
0
完成
0%
进度
0
分钟
0
完成
0%
进度

国庆活动:订阅年付会员送 6 个月,重订、续订送 12 个月。订阅 →

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 …

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

aspect-ratio 可视窗口宽与高的比例《 响应式网页设计 》

统计

11228
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点