1. 面向开发者的 Web 技术
  2. CSS：层叠样式表
  3. CSS 参考
  4. @ 规则
  5. @media
  6. orientation

此页面由社区从英文翻译而来。了解更多并加入 MDN Web Docs 社区。

View in English Always switch to English

orientation

基线
广泛可用

自 2015年7月 起，此特性已在主流浏览器中得到支持，可在大多数设备和浏览器版本中正常使用。

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

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

语法

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

关键字值

portrait

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

landscape

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

示例

HTML

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

CSS

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

浏览器兼容性

帮助改进 MDN

了解如何参与贡献

此页面最后更新于 ，由 MDN 贡献者更新。

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