height
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
語法
height
特性被指定為 <length>
值,代表視區的高度。這是一個範圍特性,這意味著你也可以使用加上前綴的 min-height
和 max-height
變體,分別查詢最小值和最大值。
範例
HTML
html
<div>當你調整視區高度時,觀察此元素。</div>
CSS
css
/* 精確高度 */
@media (height: 360px) {
div {
color: red;
}
}
/* 最小高度 */
@media (min-height: 25rem) {
div {
background: yellow;
}
}
/* 最大高度 */
@media (max-height: 40rem) {
div {
border: 2px solid blue;
}
}
結果
規範
Specification |
---|
Media Queries Level 4 # height |
瀏覽器相容性
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
height media feature |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.