height
CSS
media feature
can be used to apply styles based on the height of the
viewport
(or the page box, for
paged media
).
height
feature is specified as a
<length>
value representing the viewport height. It is a range feature, meaning that you can also use the prefixed
min-height
and
max-height
variants to query minimum and maximum values, respectively.
<div>Watch this element as you resize your viewport's height.</div>
/* Exact height */
@media (height: 360px) {
div {
color: red;
}
}
/* Minimum height */
@media (min-height: 25rem) {
div {
background: yellow;
}
}
/* Maximum height */
@media (max-height: 40rem) {
div {
border: 2px solid blue;
}
}
| 规范 | 状态 | 注释 |
|---|---|---|
|
Media Queries Level 4
The definition of 'height' in that specification. |
候选推荐 | The value can now be negative, in which case it computes to false. |
|
Media Queries
The definition of 'height' in that specification. |
推荐 | Initial definition. The value must be nonnegative. |
| Desktop | Mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
height
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 |
完整支持