width

可以使用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.

浏览器兼容性

BCD tables only load in the browser