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 CSS 媒體特性可用於根據視區的高度(或分頁媒體的頁框)套用樣式。

語法

height 特性被指定為 <length> 值,代表視區的高度。這是一個範圍特性,這意味著你也可以使用加上前綴的 min-heightmax-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 GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
height media feature

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

參見