blob: 3177fc1c29f8e6fdeb0fd096e2585c9b90cb64dc (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
|
---
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>
|
