orientation
CSS 媒体属性屏幕方向（orientation）可用于测试视口 viewport（或者对于分页媒体而言的页面框盒）的横纵方向。
备注：此属性不等价于设备的屏幕旋转方向。在许多设备上，当屏幕方向为纵向时，打开软键盘将导致视口 viewport 的宽度大于高度，从而导致浏览器突然改用横向样式，而不是保持纵向。
语法
orientation 属性被指定为下列关键字值中的任意一个。
关键字值
示例
HTML
html
<div>Box 1</div>
<div>Box 2</div>
<div>Box 3</div>
CSS
css
body {
display: flex;
}
div {
background: yellow;
}
@media (orientation: landscape) {
body {
flex-direction: row;
}
}
@media (orientation: portrait) {
body {
flex-direction: column;
}
}
结果
规范
| 规范 |
|---|
| Media Queries Level 4 # orientation |