---
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
translation_of_original: Web/Progressive_web_apps/Responsive
---
<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>