[CSS参考手册](http://css.doyoe.com/)»[属性列表](#)»[媒体查询属性](#)» 相关内容： [**其它媒体查询属性**选择其它项](#) - [width](#) - [height](#) - [device-width](#) - [device-height](#) - [orientation](#) - [aspect-ratio](#) - [device-aspect-ratio](#) - [color](#) - [color-index](#) - [monochrome](#) - [resolution](#) - [scan](#) - [grid](#) # media features orientation - **版本：CSS3** - 是否接受min/max：否 ### 语法： **orientation**：portrait | landscape ### 取值： portrait：指定输出设备中的页面可见区域高度大于或等于宽度landscape：除portrait值情况外，都是landscape ### 说明： **定义输出设备中的页面可见区域高度是否大于或等于宽度。** - 本特性不接受min和max前缀。 - **简单列举几个应用示例：** ~~~ @media screen and (orientation:portrait){ … } @import url(example.css) screen and (orientation:landscape); ~~~ ### 兼容性： - 浅绿 = 支持 - 红色 = 不支持 - 墨绿 = 部分支持 - 橙色 = 实验性质 <table class="gdataform"><thead><tr><th><a href="#browser" title="查看本文档测试时所用浏览器版本">支持版本</a>\类型</th> <th><span class="browser-ie">IE</span></th> <th><span class="browser-firefox">Firefox</span></th> <th><span class="browser-safari">Safari</span></th> <th><span class="browser-chrome">Chrome</span></th> <th><span class="browser-opera">Opera</span></th> </tr></thead><tbody><tr><th>较早版本</th> <td class="unsupport">6.0-8.0</td> <td rowspan="2" class="support">4.0-6.0</td> <td rowspan="2" class="support">5.1</td> <td rowspan="2" class="support">13.0</td> <td rowspan="2" class="support">11.50-11.51</td> </tr><tr><th>较近版本</th> <td class="support">9.0</td> </tr></tbody></table> ### 示例： 当输出设备中的页面可见宽度大于高度时，本行文字显示为红色 Copyright © 2006-2012 [Doyoe](http://www.doyoe.com/). All Rights Reserved