视口的方向 | @media.orientation (Media Queries) - CSS 中文开发手册 - Break易站
2021-01-26 05:15
视口的方向 | @media.orientation (Media Queries) - CSS 中文开发手册
该orientation CSS @media媒体功能可基于视觉取向 viewpor提供样式（或页面中，页面媒体）。
注意：此功能不符合device 取向。在纵向上打开许多设备上的软键盘将导致视口变得比高度更宽，从而导致浏览器使用横向样式而不是纵向。
句法
该orientation功能被指定为从下面的列表中选择的关键字值。
关键字值
portrait该设备是纵向的，即高度大于或等于宽度。landscape设备处于横向方向，即宽度大于高度。
例子
HTML
Box 1Box 2Box 3
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 Device Adaptation (Device Adaptation) - CSS 中文开发手册 - Break易站
下一篇：背景附件 | background-attachment (Backgrounds & Borders) - CSS 中文开发手册 - Break易站
文章标题：视口的方向 | @media.orientation (Media Queries) - CSS 中文开发手册 - Break易站
文章链接：http://soscw.com/index.php/essay/47131.html