orientation - CSS（层叠样式表） 编辑

CSS 媒体属性屏幕方向（orientation）可用于测试视口 viewport（或者对于分页媒体而言的页面框盒）的横纵方向。

注意：此属性不等价于设备的屏幕旋转方向。在许多设备上，当屏幕方向为纵向时，打开软键盘将导致视口 viewport 的宽度大于高度，从而导致浏览器突然改用横向样式，而不是保持纵向。

语法

orientation 属性被指定为下列关键字值中的任意一个。

关键字值

portrait

viewport 处于纵向，即高度大于等于宽度。

landscape

viewport 处于横向，即宽度大于高度。

例子

HTML

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

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	Candidate Recommendation	No change.
Media Queries orientation	Recommendation	Initial definition.

浏览器兼容性

BCD tables only load in the browser

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.