HTML 响应式 Web 设计

什么是响应式 Web 设计？

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

创建您自己的响应式设计

创建响应式设计的一个方法，是自己来创建它：

  1. <!DOCTYPE html>
  2. <html lang="en-US">
  3. <head>
  4. <style>
  5. .city {
  6. float: left;
  7. margin: 5px;
  8. padding: 15px;
  9. width: 300px;
  10. height: 300px;
  11. border: 1px solid black;
  12. } 
  13. </style>
  14. </head>
  16. <body>
  18. <h1>W3School Demo</h1>
  19. <h2>Resize this responsive page!</h2>
  20. <br>
  22. <div class="city">
  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>
  29. <div class="city">
  30. <h2>Paris</h2>
  31. <p>Paris is the capital and most populous city of France.</p>
  32. </div>
  34. <div class="city">
  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>
  40. </body>
  41. </html>

使用 Bootstrap

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

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

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

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

如需学习更多有关 Bootstrap 的知识，请阅读我们的 Bootstrap 教程。