有关CSS响应式布局(自适应布局)的详细操作教程

CSS响应布局也称为自适应布局,是Ethan Marcotte于2010年5月提出的概念,其中一个站点可以与多个不同终端(设备)兼容,而不是为每个终端创建特定版本。这个概念是为了解决移动网络浏览而诞生的。响应式布局可以为使用不同终端的用户提供良好的用户体验,随着大屏幕智能手机的普及,用“大势所趋”来形容也不为过。

要实现响应式布局,常用的方式有以下几种:

  • 使用 CSS 中的媒体查询(最简单);
  • 使用 JavaScript(使用成本比较高);
  • 使用第三方开源框架(例如 bootstrap,可以很好的支持各种浏览器)。

接下来我们以媒体查询为例来具体演示一下响应式布局的实现。

设置 meta 标签

首先,我们需要设置 meta 标签来告诉浏览器,让视口(网页的可视区域)的宽度等于设备的宽度,并禁止用户对页面的缩放,如下所示:

<meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no”>

在设置视口时需要注意,视口就是网页可见区域的尺寸,设置视口时只设置宽度就行,不用在乎高度,具体高度由网页内容自动撑开。上面 meta 标签中内容的含义如下:

  • viewport:即视口,表示网页的可视区域;
  • width:控制 viewport 的大小,可以指定一个具体的值,例如 600,也可以是由关键字组成的特殊值,例如 device-width 就表示设备的宽度;
  • initial-scale:表示初始缩放比例,也就是页面第一次加载时的缩放比例;
  • maximum-scale:表示允许用户缩放的最大比例,范围从 0 到 10.0;
  • minimum-scale:表示允许用户缩放到最小比例,范围从 0 到 10.0;
  • user-scalable:表示用户是否可以手动缩放,“yes”表示允许缩放,“no”表示禁止缩放。

媒体查询

CSS 媒体查询可以根据指定的条件,针对不同的媒体类型(screen print)定义不同的 CSS 样式,让使用不同设备的用户都能得到最佳的体验。

关于媒体查询有以下三种实现方式:

1、直接在 CSS 文件中使用,示例代码如下:

  1. @media (maxwidth: 320px) {
  2. /*0~320*/
  3. body {
  4. background: pink;
  5. }
  6. }
  7. @media (minwidth: 321px) and (maxwidth: 375px) {
  8. /*321~768*/
  9. body {
  10. background: red;
  11. }
  12. }
  13. @media (minwidth: 376px) and (maxwidth: 425px) {
  14. /*376~425*/
  15. body {
  16. background: yellow;
  17. }
  18. }
  19. @media (minwidth: 426px) and (maxwidth: 768px) {
  20. /*426~768*/
  21. body {
  22. background: blue;
  23. }
  24. }
  25. @media (minwidth: 769px) {
  26. /*769~+∞*/
  27. body {
  28. background: green;
  29. }
  30. }

2、使用 @import 导入,示例代码如下:

  1. @import ‘index01.css‘ screen and (maxwidth:1024px) and (minwidth:720px)
  2. @import ‘index02.css‘ screen and (maxwidth:720px)

3、在 link 标签中使用,示例代码如下:

  1. <link rel=“stylesheet” type=“text/css” href=“index01.css” media=“screen and (max-width:1024px) and (min-width:720px)”/>
  2. <link rel=“stylesheet” type=“text/css” href=“index02.css” media=“screen and (max-width:720px)”/>

更多关于媒体查询的介绍大家可以查阅《CSS媒体查询》一节。

下面通过一个综合的示例来演示一下响应式布局的实现:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset=“UTF-8”>
  5. <title>响应式布局</title>
  6. <meta name=“viewport”content=“width=device-width,initial-scale=1.0,maximum-scale=1,user-scalable=no” />
  7. <style>
  8. *{
  9. margin: 0px;
  10. padding: 0px;
  11. font-family: “微软雅黑”;
  12. }
  13. #head, #foot, #main
  14. {
  15. height: 100px;
  16. width: 1200px;
  17. /*width: 85%;*/
  18. background-color: goldenrod;
  19. text-align: center;
  20. font-size: 48px;
  21. line-height: 100px;
  22. margin: 0 auto;
  23. }
  24. #head div{
  25. display: none;
  26. font-size: 20px;
  27. height: 30px;
  28. width: 100px;
  29. background-color: green;
  30. float: right;
  31. line-height: 30px;
  32. margin-top: 35px;
  33. }
  34. #head ul{
  35. width: 80%;
  36. }
  37. #head ul li{
  38. width: 20%;
  39. float: left;
  40. text-align: center;
  41. list-style: none;font-size: 20px;
  42. }
  43. #main{
  44. height: auto;
  45. margin: 10px auto;
  46. overflow: hidden;
  47. }
  48. .left, .center, .right{
  49. height: 600px;
  50. line-height: 600px;
  51. float: left;
  52. width: 20%;
  53. background-color: red
  54. }
  55. .center{
  56. width: 60%;
  57. border-left: 10px solid #FFF;
  58. border-right: 10px solid #FFF;
  59. box-sizing: border-box;
  60. }
  61. @media only screen and (max-width: 1200px) {
  62. #head, #foot, #main{
  63. width: 100%;
  64. }
  65. }
  66. @media only screen and (max-width: 980px) {
  67. .right{
  68. display: none;
  69. }
  70. .left{
  71. width: 30%;
  72. }
  73. .center{
  74. width: 70%;
  75. border-right: hidden;
  76. }
  77. }
  78. @media only screen and (max-width: 640px) {
  79. .left, .center, .right{
  80. width: 100%;
  81. display: block;
  82. height: 200px;
  83. line-height: 200px;
  84. }
  85. .center{
  86. border: hidden;
  87. border-top: 10px solid #FFFFFF;
  88. border-bottom: 10px solid #FFFFFF;
  89. height: 600px;
  90. line-height: 600px;
  91. }
  92. #head ul{
  93. display: none;
  94. }
  95. #head div{
  96. display: block;
  97. }
  98. }
  99. </style>
  100. </head>
  101. <body>
  102. <div>
  103. <header id=“head”>
  104. <ul>
  105. <li>header1</li>
  106. <li>header2</li>
  107. <li>header2</li>
  108. <li>header2</li>
  109. <li>header2</li>
  110. </ul>
  111. <div>icon</div>
  112. </header>
  113. <section id=“main”>
  114. <div class=“left”>
  115. left
  116. </div>
  117. <div class=“center”>
  118. center
  119. </div>
  120. <div class=“right”>
  121. right
  122. </div>
  123. </section>
  124. <footer id=“foot”>
  125. footer
  126. </footer>
  127. </div>
  128. </body>
  129. </html>

当浏览器窗口小于 1200 像素大于 980 像素时,页面的样式如下图所示:

1515323307-0

当浏览器窗口大于 640 像素小于 980 像素时,页面的样式如下图所示:

1515324105-1

当浏览器窗口小于 640 像素时,页面的样式如下图所示:

151532A56-2
© 版权声明
THE END
喜欢就支持一下吧
点赞6 分享
评论 抢沙发
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

取消
昵称表情代码图片