[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 device-width - **版本：CSS3** - 是否接受min/max：是 ### 语法： **device-width**：[<length>](#) ### 取值： [<length>](#)：用长度值来定义宽度。不允许负值 ### 说明： **定义输出设备的屏幕可见宽度。** - 本特性接受min和max前缀，因此可以派生出*min-device-width*和*max-device-width*两个媒体特性。 - **简单列举几个应用示例：** ~~~ @media screen and (device-width:1024px){ … } @import url(example.css) screen and (min-device-width:800px); <link media="screen and (min-device-width:300px) and (max-device-width:900px)" rel="stylesheet" href="example.css" /> ~~~ ### 兼容性： - 浅绿 = 支持 - 红色 = 不支持 - 墨绿 = 部分支持 - 橙色 = 实验性质 <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> ### 示例： 当你的输出设备分辨率宽度设置为1024px时，本行文字显示为红色 Copyright © 2006-2012 [Doyoe](http://www.doyoe.com/). All Rights Reserved