width

Baseline 已廣泛支援

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

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

語法

width 特性被指定為表示視口寬度的 <length> 值。它是一個範圍特性，這意味著你也可以使用帶字首的 min-width 和 max-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

瀏覽器相容性

另見

幫助改進 MDN

瞭解如何貢獻

本頁面最後修改於 2025 年 7 月 14 日，由 MDN 貢獻者修訂。

在 GitHub 上檢視此頁面 • 報告此內容存在的問題