视口的方向 | @media.orientation

该orientation CSS @media媒体功能可基于视觉取向 viewpor提供样式（或页面中，页面媒体）。

注意：此功能不符合device 取向。在纵向上打开许多设备上的软键盘将导致视口变得比高度更宽，从而导致浏览器使用横向样式而不是纵向。

句法

该orientation功能被指定为从下面的列表中选择的关键字值。

关键字值

portrait该设备是纵向的，即高度大于或等于宽度。landscape设备处于横向方向，即宽度大于高度。

例子

HTML

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

CSS

body {
  display: flex;
}

div {
? background: yellow;
}

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

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

结果

规范

Specification	Status	Comment
Media Queries Level 4The definition of 'orientation' in that specification.	Working Draft	No change.
Media QueriesThe definition of 'orientation' in that specification.	Recommendation	Initial definition.

浏览器兼容性

Feature	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari
Basic support	?	?	?	?	?

Feature	Android	Firefox Mobile (Gecko)	IE Mobile	Opera Mobile	Safari Mobile
Basic support	?	?	?	?	?

本文档系腾讯云开发者社区成员共同维护，如有问题请联系 cloudcommunity@tencent.com

最后更新于：2017-12-18