参考：
目录：
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>
输出结果：略。