此页面由社区从英文翻译而来。了解更多并加入 MDN Web Docs 社区。
width
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015年7月.
In this article
语法
该width特性被指定为<length>,表示 viewport 宽度的值。这是一个范围特性,也就是说,你也可以使用前缀min-width 和max-width 分别查询最小值和最大值。
示例
>HTML
html
<div>改变 viewport 的宽度的同时,观察这个元素的变化。</div>CSS
css
/* 精确宽度 */@media (width: 360px) { div { color: red; }}/* 最小宽度 */@media (min-width: 35rem) { div { background: yellow; }}/* 最大宽度 */@media (max-width: 50rem) { div { border: 2px solid blue; }}结果
规范
| Specification |
|---|
| Media Queries Level 4> # width> |