height (可视窗口高度)与 device-height(设备高度)

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

height 是可视窗口的高度 .. device-height 是设备的整体高度 … 下面我们去试一下这两个媒体特性 …

打开页面使用的样式表 … 设置媒体查询 … @media (){}

在小括号里输入表达式 .. 使用 height:480px … 这个媒体查询的意思是,如果可视窗口的高度是 480px 的时候 …

这个 height 媒体特性支持 max 和 min 前缀 … 这里我们添加一个 max 前缀 …

这样这个媒体查询的表达式,在可视窗口的高度小于等于 480px 的时候,会返回真的值 … 也就会去应用在大括号里设计的样式 …

我们还是去为 <body> 标签设置一个背景颜色 … 这里我们使用一种橙色 …

body{
background:#f3581a;
}

保存 … 我们可以在浏览器上试一下 …

打开网页 … 调整一下可视窗口的高度 …

注意当我们的可视窗口高度调整到 480px 的时候,就会触发刚才设置的媒体查询里的样式 … 背景会变成橙色 …

继续缩小可视窗口的高度 … 背景依然会使用橙色 …

因为我们设置的媒体查询的表达式里,使用了 max 前缀 .. 它的意思是小于等于 …

再改大可视窗口的高度 …

高度超过 480px 的时候 .. 页面会恢复成默认的样式 …

device-height

我们再试一下 device-height …

回到样式表 … 把 max-height … 修改成 max-device-height … 这样这个媒体查询的意思就是,当设备的高度小于等于 480px 的时候 …

保存 … 回到浏览器 ….

调整可视窗口的高度 … 你会发现不管我们怎么缩小可视窗口的高度 … 页面都不会应用 max-device-height 媒体查询里设置的样式 …

因为这个特性判断的是设备的高度 … 而不是可视窗口的高度 …. 我的电脑屏幕的高度是 900px.. 大于在媒体查询里设置的 480px … 所以表达式会返回一个假的值 …

这样也就不会触发在媒体查询里面设计的样式了 …

下面我们可以用 iOS 模拟器试试 …

你会看到,页面的背景颜色是橙色 … 因为这个设备的整体高度是 480px … 所以 max-device-height:480px 这个表达式会返回一个真的假 …

也就会触发设计的样式 …

这里不管设备的使用方向是什么 … 都会应用这个橙色的背景 ….

height (可视窗口高度)与 device-height(设备高度)《 响应式网页设计 》

统计

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

社会化网络

关于

微信订阅号

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