diff options
Diffstat (limited to 'files/zh-cn/web/progressive_web_apps/responsive/index.html')
| -rw-r--r-- | files/zh-cn/web/progressive_web_apps/responsive/index.html | 78 |
1 files changed, 0 insertions, 78 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 deleted file mode 100644 index 3177fc1c29..0000000000 --- a/files/zh-cn/web/progressive_web_apps/responsive/index.html +++ /dev/null @@ -1,78 +0,0 @@ ---- -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> |