我们可以使用 orientation 这个媒体特性来判断设备的使用方向，比如智能手机或者平板电脑的使用方向 …
它的值可以是 landscape .. 水平方向 … 或者 portrait … 垂直方向 …
下面我们来演示一下 … 先去设置一下当设备是水平方向时的媒体查询 …
@media (orientation: landscape) {
body{
background:#27ae60;
}
}
这里我们可以设置一下 body 标签的样式 … 使用 background .. 把背景颜色设置成一种绿色 ….
这个媒体查询的意思就是当设备的使用方向是水平方向的时候 … 也就是设备的使用方向是水平方向的话，这个表达式会返回真的值 … 这样就会在页面上应用大括号里设计的样式 …
然后复制一下这块代码 … 修改一下媒体查询的表达式… 同样使用 orientation 这个特性 … 值，我们修改成 portrait … 垂直方向 …
再修改一下样式 … 把 <body> 标签的背景颜色修改成 黄色 …
@media (orientation: portrait) {
body{
background:#f2cb2b;
}
}
保存 …
下面我们可以使用 iOS 设备的模拟器去测试一下 …
现在设备的使用方向是垂直方向 …. 所以在应用在 orientation 是 portrait 这个媒体查询里设计的样式 … 背景会是一种黄色 …
调整一下设备的使用方向 ….
现在设备的使用方向变成了水平方向 … 这样页面会去应用 orientation 是 landscape 时候的样式 …
背景会变成绿色 …
