orientation

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