1 files changed, 77 insertions, 0 deletions
diff --git a/files/zh-cn/web/progressive_web_apps/responsive/index.html b/files/zh-cn/web/progressive_web_apps/responsive/index.html
new file mode 100644
index 0000000000..f357c6f81b
--- /dev/null
+++ b/files/zh-cn/web/progressive_web_apps/responsive/index.html
@@ -0,0 +1,77 @@
+---
+title: Responsive design
+slug: Web/Progressive_web_apps/Responsive
+tags:
+  - Media Queries
+  - PWA
+  - Progressive web apps
+  - Responsive web design
+  - viewport
+translation_of: Web/Progressive_web_apps/Responsive/responsive_design_building_blocks
+---
+<div class="column-container summary">
+<div class="column-11"><span class="seoSummary">响应式Web应用使用媒体查询和viewport等技术，以确保它们的页面适配任何设备，比如：桌面、移动手机、平板，或者其他新的设备。</span></div>
+
+<div class="column-1"><img alt="" src="https://mdn.mozillademos.org/files/12650/responsive.svg"></div>
+</div>
+
+<h2 id="核心指南">核心指南</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/Apps/Modern/Responsive/responsive_design_building_blocks">The building blocks of responsive design</a></dt>
+ <dd>Learn the basics of responsive design, an essential topic for modern app layout.</dd>
+ <dt><a href="/en-US/docs/Web/Apps/Modern/Responsive/Mobile_first">Mobile first</a></dt>
+ <dd>Often when creating responsive application layouts, it makes sense to create the mobile layout as the default, and build wider layouts on top.</dd>
+</dl>
+
+<h2 id="技术">技术</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Technology</th>
+   <th scope="col">Description</th>
+   <th scope="col">Support summary</th>
+   <th scope="col">Latest spec</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/Media_Queries">Media queries</a></td>
+   <td>Defines expressions allowing styling to be selectively applied to content depending on viewport size, resolution, orientation, etc.</td>
+   <td>Widespread across modern browsers (<a href="/en-US/docs/Web/CSS/Media_Queries#Browser_compatibility">more detail</a>)</td>
+   <td><a href="https://drafts.csswg.org/mediaqueries-4/">Media Queries Level 4</a></td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/@viewport">@viewport</a>/<a href="/en-US/docs/Mozilla/Mobile/Viewport_meta_tag">viewport meta tag</a></td>
+   <td>Controls viewport settings, primarily on mobile devices.</td>
+   <td>@viewport: Experimental (<a href="/en-US/docs/Web/CSS/@viewport#Browser_compatibility">more detail</a>)<br>
+    Viewport meta tag: Widespread across modern mobile devices</td>
+   <td><a href="https://drafts.csswg.org/css-device-adapt/#the-atviewport-rule">CSS Device Adaptation Module Level 1</a></td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout">Flexbox</a></td>
+   <td>A very useful CSS feature for creating flexible, responsive layouts.</td>
+   <td>Widespread across modern browsers (<a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout#Browser_compatibility">more detail</a>)</td>
+   <td><a href="https://drafts.csswg.org/css-flexbox-1/">CSS Flexible Box Layout Module Level 1</a></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="工具">工具</h2>
+
+<dl>
+ <dt><a href="https://modernizr.com/">Modernizr</a></dt>
+ <dd>A feature detection library for applying different CSS and JS to your page depending on whether certain CSS/JS features are supported.</dd>
+ <dt><a href="https://code.google.com/archive/p/css3-mediaqueries-js/">css3-mediaqueries-js</a></dt>
+ <dd>A JavaScript polyfill to add Media Query support to old versions of IE (5+.)</dd>
+</dl>
+
+<h2 id="参见">参见</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/Apps/Modern/Responsive/Graphics_for_responsive_sites">Graphics for responsive sites</a></dt>
+ <dd>Ideas to keep in mind when designing graphics for responsive sites and applications.</dd>
+ <dt><a href="/en-US/docs/Web/Apps/Modern/Responsive/Responsive_navigation_patterns">Responsive navigation patterns</a></dt>
+ <dd>How do you make a UI that looks and works as great on a smartphone as it does on the desktop? Learn how to design UIs that change to fit your user's screen.</dd>
+</dl>