视口的方向 | @media.orientation (Media Queries)

  CSS 中文开发手册

视口的方向 | @media.orientation (Media Queries) - CSS 中文开发手册

该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	?	?	?	?	?

  CSS 中文开发手册

  本文标题：视口的方向 | @media.orientation (Media Queries) – CSS 中文开发手册 - Break易站

转载请保留页面地址：https://www.breakyizhan.com/css/32275.html