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 这个表达式会返回一个真的假 …
也就会触发设计的样式 …
这里不管设备的使用方向是什么 … 都会应用这个橙色的背景 ….
