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.

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! (en-US)

Desktop
Mobile

Feature	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari
Basic support	(Yes)	(Yes)	9.0	(Yes)	(Yes)

Feature	Android	Firefox Mobile (Gecko)	IE Mobile	Opera Mobile	Safari Mobile
Basic support	?	?	?	?	?

width

语法

例子

HTML

CSS

结果

规范

浏览器兼容性