媒体查询(Media Queries) · CSS 3 中文手册

[CSS参考手册](http://css.doyoe.com/)»[属性列表](#)» 媒体查询属性相关内容： [**其它媒体查询属性**选择其它项](#) - [width](#) - [height](#) - [device-width](#) - [device-height](#) - [orientation](#) - [aspect-ratio](#) - [device-aspect-ratio](#) - [color](#) - [color-index](#) - [monochrome](#) - [resolution](#) - [scan](#) - [grid](#) # CSS Media Queries Properties - **版本：CSS3** ### 语法： **<media_query_list>**：[[<media_query>](#)[',' [<media_query>](#)]*]? **<media_query>**：[only | not]? [<media_type>](#) [and [<expression>](#)]* | [<expression>](#) [and [<expression>](#)]* **<expression>**：'('[<media_feature>](#)[:<value>]?')' ### 说明： **通过不同的媒体类型和条件定义样式表规则。** - 媒体查询让CSS可以更精确作用于不同的媒体类型和同一媒体的不同条件。 - 媒体查询的大部分媒体特性都接受min和max用于表达“大于或等于”和“小与或等于”。如：width会有min-width和max-width - 媒体查询可以被用在CSS中的@media和@import规则上，也可以被用在HTML和XML中。 **示例代码：** ~~~ @media screen and (width:800px){ … } @import url(example.css) screen and (width:800px); <link media="screen and (width:800px)" rel="stylesheet" href="example.css" /> <?xml-stylesheet media="screen and (width:800px)" rel="stylesheet" href="example.css" ?> ~~~ ### 媒体特性 Media Features <table class="gdataform"><thead><tr><th>Media Features<br/>媒体特性</th> <th>Value<br/>取值</th> <th>Accepts min/max<br/>接受min/max</th> <th>Description<br/>简介</th> </tr></thead><tbody><tr><td><a href="width.htm" class="linkcss3">width</a></td> <td><a href="../../values/other/length.htm"><length></a></td> <td>yes</td> <td>定义输出设备中的页面可见区域宽度</td> </tr><tr><td><a href="height.htm" class="linkcss3">height</a></td> <td><a href="../../values/other/length.htm"><length></a></td> <td>yes</td> <td>定义输出设备中的页面可见区域高度</td> </tr><tr><td><a href="device-width.htm" class="linkcss3">device-width</a></td> <td><a href="../../values/other/length.htm"><length></a></td> <td>yes</td> <td>定义输出设备的屏幕可见宽度</td> </tr><tr><td><a href="device-height.htm" class="linkcss3">device-height</a></td> <td><a href="../../values/other/length.htm"><length></a></td> <td>yes</td> <td>定义输出设备的屏幕可见高度</td> </tr><tr><td><a href="orientation.htm" class="linkcss3">orientation</a></td> <td>portrait | landscape</td> <td>no</td> <td>定义'height'是否大于或等于'width'。值portrait代表是，landscape代表否</td> </tr><tr><td><a href="aspect-ratio.htm" class="linkcss3">aspect-ratio</a></td> <td><ratio></td> <td>yes</td> <td>定义'width'与'height'的比率</td> </tr><tr><td><a href="device-aspect-ratio.htm" class="linkcss3">device-aspect-ratio</a></td> <td><ratio></td> <td>yes</td> <td>定义'device-width'与'device-height'的比率。如常见的显示器比率：4/3, 16/9, 16/10</td> </tr><tr><td><a href="color.htm" class="linkcss3">color</a></td> <td><a href="../../values/numeric/integer.htm"><integer></a></td> <td>yes</td> <td>定义每一组输出设备的彩色原件个数。如果不是彩色设备，则值等于0</td> </tr><tr><td><a href="color-index.htm" class="linkcss3">color-index</a></td> <td><a href="../../values/numeric/integer.htm"><integer></a></td> <td>yes</td> <td>定义在输出设备的彩色查询表中的条目数。如果没有使用彩色查询表，则值等于0</td> </tr><tr><td><a href="monochrome.htm" class="linkcss3">monochrome</a></td> <td><a href="../../values/numeric/integer.htm"><integer></a></td> <td>yes</td> <td>定义在一个单色框架缓冲区中每像素包含的单色原件个数。如果不是单色设备，则值等于0</td> </tr><tr><td><a href="resolution.htm" class="linkcss3">resolution</a></td> <td><resolution></td> <td>yes</td> <td>定义设备的分辨率。如：96dpi, 300dpi, 118dpcm</td> </tr><tr><td><a href="scan.htm" class="linkcss3">scan</a></td> <td>progressive | interlace</td> <td>no</td> <td>定义电视类设备的扫描工序</td> </tr><tr><td><a href="grid.htm" class="linkcss3">grid</a></td> <td><a href="../../values/numeric/integer.htm"><integer></a></td> <td>no</td> <td>用来查询输出设备是否使用栅格或点阵。只有1和0才是有效值，1代表是，0代表否</td> </tr></tbody></table> **这种颜色** 的链接表示是CSS3属性或原属性被CSS3修改并增加了新的属性值 ### 兼容性： - 浅绿 = 支持 - 红色 = 不支持 - 墨绿 = 部分支持 - 橙色 = 实验性质 <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