width
CSS
media feature
can be used to test the width of the
viewport
(or the page box, for
paged media
).
width
feature is specified as a
<length>
value representing the viewport width. It is a range feature, meaning that you can also use the prefixed
min-width
and
max-width
variants to query minimum and maximum values, respectively.
<div>Watch this element as you resize your viewport's width.</div>
/* Exact width */
@media (width: 360px) {
div {
color: red;
}
}
/* Minimum width */
@media (min-width: 35rem) {
div {
background: yellow;
}
}
/* Maximum width */
@media (max-width: 50rem) {
div {
border: 2px solid blue;
}
}
| 规范 | 状态 | 注释 |
|---|---|---|
|
Media Queries Level 4
The definition of 'width' in that specification. |
候选推荐 | The value can now be negative, in which case it computes to false. |
|
Media Queries
The definition of 'width' in that specification. |
推荐 | Initial definition. The value must be nonnegative. |
| Desktop | Mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
width
media feature
|
Chrome 完整支持 1 | Edge 完整支持 12 | Firefox 完整支持 2 | IE 完整支持 9 | Opera 完整支持 10 | Safari 完整支持 3 | WebView Android 完整支持 ≤37 | Chrome Android 完整支持 18 | Firefox Android 完整支持 4 | Opera Android 完整支持 10.1 | Safari iOS 完整支持 1 | Samsung Internet Android 完整支持 1.0 |
完整支持