此頁面由社群從英文翻譯而來。了解更多並加入 MDN Web Docs 社群。

View in English Always switch to English

height

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨2015年7月⁩.

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

瀏覽器相容性

參見