width

Baseline 已廣泛支援

此特性已相當成熟,可在許多裝置和瀏覽器版本上使用。自 ⁨2015 年 7 月⁩以來,各瀏覽器均已提供此特性。

width CSS 媒體特性可用於測試視口(或分頁媒體的頁面框)的寬度。

語法

width 特性被指定為表示視口寬度的 <length> 值。它是一個範圍特性,這意味著你也可以使用帶字首的 min-widthmax-width 變體來分別查詢最小值和最大值。

示例

HTML

html
<div>Watch this element as you resize your viewport's width.</div>

CSS

css
/* Exact width */
@media (width: 360px) {
  div {
    color: red;
  }
}

/* Minimum width */
@media (min-width: 35rem) {
  div {
    background: yellow;
  }
}

/* Maximum width */
@media (max-width: 50rem) {
  div {
    border: 2px solid blue;
  }
}

結果

規範

規範
媒體查詢第 4 級
# width

瀏覽器相容性

另見