视口的方向 | @media.orientation

@media.orientation

该orientation CSS @media媒体功能可基于视觉取向 viewpor提供样式（或页面中，页面媒体）。

注意：此功能不符合device 取向。在纵向上打开许多设备上的软键盘将导致视口变得比高度更宽，从而导致浏览器使用横向样式而不是纵向。

句法

该orientation功能被指定为从下面的列表中选择的关键字值。

关键字值

portrait该设备是纵向的，即高度大于或等于宽度。landscape设备处于横向方向，即宽度大于高度。

例子

HTML

<div>Box 1</div>
<div>Box 2</div>
<div>Box 3</div>

CSS

body {
  display: flex;
}

div {
  background: yellow;
}

@media screen and (orientation: landscape) {
  body {
    flex-direction: row;
  }
}

@media screen and (orientation: portrait) {
  body {
    flex-direction: column;
  }
}

结果

规范

浏览器兼容性