CSS3 媒体查询 orientation
说明：本文档兼容性测试基础环境为：windows系统；IE6-IE10, Firefox6.0, Chrome13.0, Safari5.1, Opera11.51
语法：
orientation：portrait | landscape
取值：
portrait：
指定输出设备中的页面可见区域高度大于或等于宽度
landscape：
除portrait值情况外，都是landscape
说明：
定义输出设备中的页面可见区域高度是否大于或等于宽度。
本特性不接受min和max前缀。
简单列举几个应用示例：
@media screen and (orientation:portrait){ … }
@import url(example.css) screen and (orientation:landscape);
兼容性：
= 支持
= 不支持
= 部分支持
= 实验性质
| 支持版本\类型 | |||||
|---|---|---|---|---|---|
| 较早版本 | 6-8 | 4 | 5.1.7 | 13 | 11.5 |
| 较近版本 | 9 |
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>media features orientation_CSS参考手册_web前端开发参考手册系列</title>
<style>
@media not screen and (orientation:portrait){
body{color:#f00;}
}
</style>
</head>
<body>
<div>当输出设备中的页面可见宽度大于高度时，本行文字显示为红色</div>
</body>
</html>
评论回复