方向

**orientation** CSS 媒体特征可用于测试视窗（或页框，用于分页媒体）的方向。

**注意：**此特征不对应于*设备*方向。在许多设备上，以纵向模式打开软键盘会导致视窗宽度大于高度，从而导致浏览器使用横向样式而不是纵向样式。

语法

orientation 特征指定为从以下列表中选择的关键字值。

关键字值

portrait: 视窗处于纵向模式，即高度大于或等于宽度。
landscape: 视窗处于横向模式，即宽度大于高度。

示例

纵向模式

在此示例中，HTML 中有三个框，并使用 orientation 媒体特征在行布局（横向）和列布局（纵向）之间切换。

示例输出嵌入在一个 <iframe> 中，其高度大于宽度，因此框获得列布局。

HTML

html

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

CSS

css

body {
  display: flex;
}

div {
  background: yellow;
  width: 200px;
  height: 200px;
  margin: 0.5rem;
  padding: 0.5rem;
}

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

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

结果

横向模式

此示例与上一个示例的代码完全相同：它在 HTML 中有三个框，并使用 orientation 媒体特征在行布局（横向）和列布局（纵向）之间切换。

但是，在此示例中，示例输出嵌入在一个 <iframe> 中，其高度小于宽度，因此框获得行布局。

HTML

html

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

CSS

css

body {
  display: flex;
}

div {
  background: yellow;
  width: 200px;
  height: 200px;
  margin: 0.5rem;
  padding: 0.5rem;
}

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

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

规范

规范
媒体查询第 4 级 # 方向

浏览器兼容性

BCD 表格仅在浏览器中加载