这篇翻译不完整。请帮忙从英语翻译这篇文章

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

语法

width特性被指定为<length>,表示viewport宽度的值。这是一个范围特性,也就是说,您也可以使用前缀min-widthmax-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!

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 ? ? ? ? ?

文档标签和贡献者

此页面的贡献者: sdc37h
最后编辑者: sdc37h,