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-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

瀏覽器相容性

BCD tables only load in the browser

參見