1、什么是响应式 Web 设计？

RWD 指的是响应式 Web 设计（Responsive Web Design）
RWD 能够以可变尺寸传递网页
RWD 对于平板和移动设备是必需的

2、创建自己的响应设计

　　举例：

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title>My test page</title>
 6         
 7         <!--float：整体向左浮动/向右浮动-->
 8         <!--margin：边缘，到边缘的距离-->
 9         <!--padding：填充物-->
10         <!--width：宽度-->
11         <!--height：高度-->
12         <!--border：边框-->
13         <style>
14             .city {
15                 float: left;
16                 margin: 50px;
17                 padding: 15px;
18                 width: 300px;
19                 height: 300px;
20                 border: 1px solid black;
21             }            
22         </style>
23     </head>
24     
25     <body>
26         <h1>W3School Demo</h1>
27         <h2>Resize this responsive page!</h2>
28 
29         <div class="city">
30             <h2>London</h2>
31             <p>London is the capital city of England.</p>
32             <p>It is the most populous city in the United Kingdom,
33             with a metropolitan area of over 13 million inhabitants.</p>
34         </div>
35 
36         <div class="city">
37             <h2>Paris</h2>
38             <p>Paris is the capital and most populous city of France.</p>
39         </div>
40 
41         <div class="city">
42             <h2>Tokyo</h2>
43             <p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area,
44             and the most populous metropolitan area in the world.</p>
45         </div>
46     
47     </body>
48 </html>

　　输出结果：略。

3、使用 Bootstrap

　　另一个创建响应式设计的方法，是使用现成的 CSS 框架。

　　Bootstrap 是最流行的开发响应式 web 的 HTML、CSS和JS框架。

　　Bootstrap 帮助您开发在任何尺寸都外观出众的站点：显示器、笔记本电脑、平板电脑或手机：

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title>My test page</title>
 6         
 7         <link rel="stylesheet" 
 8               href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
 9     </head>
10     
11     <body>
12         <div class="container">
13         <div class="jumbotron">
14             <h1>W3School Demo</h1>
15             <h2>Resize this responsive page!</h2>
16         </div>
17         </div>
18         
19         <div class="container">
20         <div class="row">
21 
22             <div class="col-md-4">
23                 <h2>London</h2>
24                 <p>London is the capital city of England.</p>
25                 <p>It is the most populous city in the United Kingdom,
26                 with a metropolitan area of over 13 million inhabitants.</p>
27             </div>
28 
29             <div class="col-md-4">
30                 <h2>Paris</h2>
31                 <p>Paris is the capital and most populous city of France.</p>
32             </div>
33 
34             <div class="col-md-4">
35                 <h2>Tokyo</h2>
36                 <p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area,
37                 and the most populous metropolitan area in the world.</p>
38             </div>
39         </div>
40         </div>
41         
42     </body>
43 </html>

　　输出结果：略。