width - CSS（层叠样式表）编辑

可以使用width CSS @media 基于viewport宽度(或页面框，用于paged media)应用样式。

语法

该width特性被指定为<length>，表示viewport宽度的值。这是一个范围特性，也就是说，您也可以使用前缀min-width和max-width分别查询最小值和最大值。

例子

HTML

<div>改变viewport的宽度的同时，观察这个元素的变化。</div>

CSS

/* 精确宽度 */
@media (width: 360px) {
  div {
    color: red;
  }
}

/* 最小宽度 */
@media (min-width: 35rem) {
  div {
    background: yellow;
  }
}

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

规范

Specification	Status	Comment
Media Queries Level 4 width	Candidate Recommendation	The value can now be negative, in which case it computes to false.
Media Queries width	Recommendation	Initial definition. The value must be nonnegative.

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!