响应式网页设计 - 网格视图


什么是网格视图?

许多网页都基于网格视图(grid-view),这意味着页面被分割为几列:

在设计网页时,使用网格视图非常有帮助。这样可以更轻松地在页面上放置元素。

响应式网格视图通常有 12 列,总宽度为 100%,并且在调整浏览器窗口大小时会收缩和伸展。


构建响应式网格视图

让我们开始构建响应式网格视图。

首先,确保所有 HTML 元素的 box-sizing 属性设置为 border-box。这样可以确保元素的总宽度和高度中包括内边距(填充)和边框。

请在 CSS 中添加如下代码:

  1. * {
  2. box-sizing: border-box;
  3. }

可以访问本站的 CSS Box Sizing 一章中阅读有关 box-sizing 属性的更多内容。

下面的例子展示了一张简单的响应式网页,其中包含两列:

25%
75%
实例
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  5. <style>
  6. * {
  7. box-sizing: border-box;
  8. }
  9. .header {
  10. border: 1px solid red;
  11. padding: 15px;
  12. }
  13. .menu {
  14. width: 25%;
  15. float: left;
  16. padding: 15px;
  17. border: 1px solid red;
  18. }
  19. .main {
  20. width: 75%;
  21. float: left;
  22. padding: 15px;
  23. border: 1px solid red;
  24. }
  25. </style>
  26. </head>
  27. <body>
  28. <div class="header">
  29. <h2>上海</h2>
  30. </div>
  31. <div class="menu">
  32. <ul>
  33. <li>航班</li>
  34. <li>城市</li>
  35. <li>岛屿</li>
  36. <li>美食</li>
  37. </ul>
  38. </div>
  39. <div class="main">
  40. <h2>城市</h2>
  41. <p>上海是中华人民共和国四个直辖市之一。欢迎来到上海!
  42. </p>
  43. <p>请调整浏览器窗口的大小,来查看内容如何响应调整大小。</p>
  44. </div>
  45. </body>
  46. </html>

若网页只包含两列,则上面的例子还不错。

但是,我们希望使用拥有 12 列的响应式网格视图,来更好地控制网页。

首先,我们必须计算一列的百分比:100% / 12 列 = 8.33%。

然后,我们为 12 列中的每一列创建一个类,即 class="col-" 和一个数字,该数字定义此节应跨越的列数:

CSS:
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  5. <style>
  6. * {
  7. box-sizing: border-box;
  8. }
  9. .header {
  10. border: 1px solid red;
  11. padding: 15px;
  12. }
  13. .row::after {
  14. content: "";
  15. clear: both;
  16. display: table;
  17. }
  18. [class*="col-"] {
  19. float: left;
  20. padding: 15px;
  21. border: 1px solid red;
  22. }
  23. .col-1 {width: 8.33%;}
  24. .col-2 {width: 16.66%;}
  25. .col-3 {width: 25%;}
  26. .col-4 {width: 33.33%;}
  27. .col-5 {width: 41.66%;}
  28. .col-6 {width: 50%;}
  29. .col-7 {width: 58.33%;}
  30. .col-8 {width: 66.66%;}
  31. .col-9 {width: 75%;}
  32. .col-10 {width: 83.33%;}
  33. .col-11 {width: 91.66%;}
  34. .col-12 {width: 100%;}
  35. </style>
  36. </head>
  37. <body>
  38. <div class="header">
  39. <h1>上海</h1>
  40. </div>
  41. <div class="row">
  42. <div class="col-3">
  43. <ul>
  44. <li>航班</li>
  45. <li>城市</li>
  46. <li>岛屿</li>
  47. <li>美食</li>
  48. </ul>
  49. </div>
  50. <div class="col-9">
  51. <h2>城市</h2>
  52. <p>上海是中华人民共和国四个直辖市之一。欢迎来到上海!
  53. </p>
  54. <p>请调整浏览器窗口的大小,来查看内容如何响应调整大小。</p>
  55. </div>
  56. </div>
  57. </body>
  58. </html>

所有这些列应向左浮动,并带有 15px 的内边距:

CSS:
  1. [class*="col-"] {
  2. float: left;
  3. padding: 15px;
  4. border: 1px solid red;
  5. }

每行都应被包围在 <div> 中。行内的列数总应总计为 12:

HTML:
  1. <div class="row">
  2. <div class="col-3">...</div> <!-- 25% -->
  3. <div class="col-9">...</div> <!-- 75% -->
  4. </div>

行内的所有列全部都向左浮动,因此会从页面流中移出,并将放置其他元素,就好像这些列不存在一样。为了防止这种情况,我们会添加清除流的样式:

CSS:
  1. .row::after {
  2. content: "";
  3. clear: both;
  4. display: table;
  5. }

我们还想添加一些样式和颜色,使其看起来更美观:

实例
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  5. <style>
  6. * {
  7. box-sizing: border-box;
  8. }
  9. .row::after {
  10. content: "";
  11. clear: both;
  12. display: table;
  13. }
  14. [class*="col-"] {
  15. float: left;
  16. padding: 15px;
  17. }
  18. .col-1 {width: 8.33%;}
  19. .col-2 {width: 16.66%;}
  20. .col-3 {width: 25%;}
  21. .col-4 {width: 33.33%;}
  22. .col-5 {width: 41.66%;}
  23. .col-6 {width: 50%;}
  24. .col-7 {width: 58.33%;}
  25. .col-8 {width: 66.66%;}
  26. .col-9 {width: 75%;}
  27. .col-10 {width: 83.33%;}
  28. .col-11 {width: 91.66%;}
  29. .col-12 {width: 100%;}
  30. html {
  31. font-family: "Lucida Sans", sans-serif;
  32. }
  33. .header {
  34. background-color: #9933cc;
  35. color: #ffffff;
  36. padding: 15px;
  37. }
  38. .menu ul {
  39. list-style-type: none;
  40. margin: 0;
  41. padding: 0;
  42. }
  43. .menu li {
  44. padding: 8px;
  45. margin-bottom: 7px;
  46. background-color: #33b5e5;
  47. color: #ffffff;
  48. box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
  49. }
  50. .menu li:hover {
  51. background-color: #0099cc;
  52. }
  53. </style>
  54. </head>
  55. <body>
  56. <div class="header">
  57. <h2>上海</h2>
  58. </div>
  59. <div class="row">
  60. <div class="col-3 menu">
  61. <ul>
  62. <li>航班</li>
  63. <li>城市</li>
  64. <li>岛屿</li>
  65. <li>美食</li>
  66. </ul>
  67. </div>
  68. <div class="col-9">
  69. <h2>城市</h2>
  70. <p>上海是中华人民共和国四个直辖市之一。欢迎来到上海!
  71. </p>
  72. <p>请调整浏览器窗口的大小,来查看内容如何响应调整大小。</p>
  73. </div>
  74. </div>
  75. </body>
  76. </html>

请注意,当您将浏览器窗口调整为非常小的宽度时,例中的网页看起来并不理想。在下一章中,您将学习如何解决这个问题。

分类导航