1 files changed, 126 insertions, 0 deletions
diff --git a/files/zh-cn/web/css/@media/width/index.html b/files/zh-cn/web/css/@media/width/index.html
new file mode 100644
index 0000000000..79b6612aac
--- /dev/null
+++ b/files/zh-cn/web/css/@media/width/index.html
@@ -0,0 +1,126 @@
+---
+title: width
+slug: Web/CSS/@media/width
+tags:
+  - '@media'
+  - CSS
+  - NeedsBrowserCompatibility
+  - Reference
+  - media feature
+translation_of: Web/CSS/@media/width
+---
+<div>{{cssref}}</div>
+
+<p><code><font face="Open Sans, arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;">可以使用</span></font><strong>width</strong></code> <a href="/en-US/docs/CSS">CSS</a> {{cssxref("@media")}} 基于{{glossary("viewport")}}宽度(或页面框，用于<a href="/en-US/docs/Web/CSS/Paged_media">paged media</a>)应用样式。</p>
+
+<h2 id="语法"><strong>语法</strong></h2>
+
+<p>该<code>width</code>特性被指定为{{cssxref("&lt;length&gt;")}}，表示viewport宽度的值。这是一个范围特性，也就是说，您也可以使用前缀<strong><code>min-width</code></strong>和<code><strong>max-width</strong></code>分别查询最小值和最大值。</p>
+
+<h2 id="例子"><strong>例子</strong></h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div&gt;改变viewport的宽度的同时，观察这个元素的变化。&lt;/div&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">/* 精确宽度 */
+@media (width: 360px) {
+  div {
+    color: red;
+  }
+}
+
+/* 最小宽度 */
+@media (min-width: 35rem) {
+  div {
+    background: yellow;
+  }
+}
+
+/* 最大宽度 */
+@media (max-width: 50rem) {
+  div {
+    border: 2px solid blue;
+  }
+}
+</pre>
+
+<h3 id="结果">结果</h3>
+
+<p>{{EmbedLiveSample('Example','90%')}}</p>
+
+<h2 id="规范"><strong>规范</strong></h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Media Queries', '#width', 'width')}}</td>
+   <td>{{Spec2('CSS4 Media Queries')}}</td>
+   <td>The value can now be negative, in which case it computes to false.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Media Queries', '#width', 'width')}}</td>
+   <td>{{Spec2('CSS3 Media Queries')}}</td>
+   <td>Initial definition. The value must be nonnegative.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility"><strong>浏览器兼容性</strong></h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>9.0</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>