orientation

Baseline 已广泛支持

此特性已相当成熟，可在许多设备和浏览器版本上使用。自 ⁨2015 年 7 月⁩以来，各浏览器均已提供此特性。

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 级 # orientation

浏览器兼容性

帮助改进 MDN

了解如何贡献

此页面最后由 MDN 贡献者在 2025年7月14日修改。

在 GitHub 上查看此页面 • 报告此内容的问题