[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 width - **版本：CSS3** - 是否接受min/max：是 ### 语法： **width**：[<length>](#) ### 取值： [<length>](#)：用长度值来定义宽度。不允许负值 ### 说明： **定义输出设备中的页面可见区域宽度。** - 与[盒模型width](#)不同，[媒体特性width](#)的取值只能是[<length>](#)。 - 本特性接受min和max前缀，因此可以派生出*min-width*和*max-width*两个媒体特性。 - **简单列举几个应用示例：** ~~~ @media screen and (width){ … } @import url(example.css) screen and (width:800px); <link media="screen and (min-width:400px) and (max-width:900px)" rel="stylesheet" href="example.css" /> <?xml-stylesheet media="not screen and (width:800px)" 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> ### 示例： 当页面可见宽度大于500px小于1000px时，本行文字显示为红色。试着调整你的viewport使得页面宽度介于这个区间以查看效果 Copyright © 2006-2012 [Doyoe](http://www.doyoe.com/). All Rights Reserved