响应式原理概览之bootstrap初窥门径

 4,190浏览     wenqyAdmin   

自从Android、IOS的兴起，移动互联网的到来，各种设备铺天盖地，为各种操作系统定制应用显然成为一种沉重的负担，开发和维护都显得劳心劳力。于是一种响应式的设计出现了，自适应网页，兼容各种设备，或者为不同的设备定制相应的效果。而当下前端最流行的响应式莫过于bootstrap，可以兼容各种浏览器。而今，就浅谈下bootstrap，剖析下是如何实现响应式的。

网页宽度自动调整

响应式设计的目标就是“一次设计，普遍适用”。在HTML5 文档类型的<head>标签中添加 viewport 元数据标签。他是以移动设备优先。通常访问网页时它默认会对网页进行缩放，尽可能多地在屏幕上展示整个页面的内容。加入 viewport 元数据标签修正由浏览器自动缩放带来的影响，允许网页宽度自动调整。

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

术语注释：

width=device-width：宽度等于当前设备的宽度

initial-scale=1：初始的缩放比例（默认为1）

maximum-scale=1：允许用户缩放到得最大比例（默认为1）

user-scalable=no：禁用手动缩放

媒体查询

判断出终端设备的容器宽度，然后选择性的加载吻合大小的网页，也就是媒体查询，针对不同的媒体类型定义不同的样式。所有主流浏览器都支持这个设置，包括IE9。对于想兼容IE老版本的可以引用下https://github.com/livingston/css3-mediaqueries-js。

固定宽度

可以看下bootstrap的css源码：

  1. .container {
  2.   padding-right: 15px;
  3.   padding-left: 15px;
  4.   margin-right: auto;
  5.   margin-left: auto;
  6. }
  7. /* 超小屏幕（手机，小于 768px） */
  8. /* 没有任何媒体查询相关的代码，因为这在 Bootstrap 中是默认的（ Bootstrap 是移动设备优先） */
  10. /* 小屏幕（平板，大于等于 768px） */
  11. @media (min-width: 768px) {
  12.   .container {
  13.     width: 750px;
  14.   }
  15. }
  17. /* 中等屏幕（桌面显示器，大于等于 992px） */
  18. @media (min-width: 992px) {
  19.   .container {
  20.     width: 970px;
  21.   }
  22. }
  23. /* 大屏幕（大桌面显示器，大于等于 1200px） */
  24. @media (min-width: 1200px) {
  25.   .container {
  26.     width: 1170px;
  27.   }
  28. }

利用媒体查询定义了适应不同设备屏幕的宽度，将布局限制在container 容器里，固定宽度。

  1. <div class=“container”>
  2.   …
  3. </div>

100% 宽度

直接针对流式布局：

  1. .container-fluid {
  2.   padding-right: 15px;
  3.   padding-left: 15px;
  4.   margin-right: auto;
  5.   margin-left: auto;
  6. }

流式布局将html限制在container-fluid容器。

  1. <div class=“container-fluid”>
  2.   …
  3. </div>

栅格系统

栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。

  1. .row {
  2.   margin-right: –15px;
  3.   margin-left: –15px;
  4. }

“行（row）”必须包含在 .container （固定宽度）或 .container-fluid （100% 宽度）中，以便为其赋予合适的排列（aligment）和内补（padding）。通过为 .row 元素设置负值 margin 从而抵消掉为 .container 元素设置的 padding。

系统会自动分为最多12列，宽度以百分比计算，宽度100%十二等分，每份8.33333333%。

  1. .col-*-1 {
  2.     width: 8.33333333%;
  3. }
  4. .col-*-2 {
  5.     width: 16.66666667%;
  6. }
  7. …
  8. .col-*-12 {
  9.     width: 100%;
  10. }

*  值为：xs、sm、md、lg分别适应媒体查询不同设备屏幕宽度。媒体查询的宽度分界阈值分别为：768px、992px、1200px。

先来看下样例效果图：

bootstrap_response

css样式修饰部分：

  1. /* bootstrap.css 部分源码摘录 */
  2. html {
  3.     font-family: sans-serif;
  4.     -webkit-text-size-adjust: 100%;
  5.     -ms-text-size-adjust: 100%;
  6. }
  7. body {
  8.     margin: 0;
  9. }
  10. * {
  11.     -webkit-box-sizing: border-box;
  12.     -moz-box-sizing: border-box;
  13.     box-sizing: border-box;
  14. }
  15. *:before,
  16. *:after {
  17.     -webkit-box-sizing: border-box;
  18.     -moz-box-sizing: border-box;
  19.     box-sizing: border-box;
  20. }
  21. html {
  22.     font-size: 10px;
  23.     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  24. }
  25. /* <body> 元素和所有段落元素 font-size 设置为 14px，line-height 设置为 1.428。 */
  26. body {
  27.     font-family: “Helvetica Neue”, Helvetica, Arial, sans-serif;
  28.     font-size: 14px;
  29.     line-height: 1.42857143;
  30.     color: #333;
  31.     background-color: #fff;
  32. }
  33. /*  固定宽带布局 */
  34. .container {
  35.     padding-right: 15px;
  36.     padding-left: 15px;
  37.     margin-right: auto;
  38.     margin-left: auto;
  39. }
  40. @media (min-width: 768px) {
  41.     .container {
  42.         width: 750px;
  43.     }
  44. }
  45. @media (min-width: 992px) {
  46.     .container {
  47.         width: 970px;
  48.     }
  49. }
  50. @media (min-width: 1200px) {
  51.     .container {
  52.         width: 1170px;
  53.     }
  54. }
  55. /* 100%宽度流式布局 */
  56. .container-fluid {
  57.     padding-right: 15px;
  58.     padding-left: 15px;
  59.     margin-right: auto;
  60.     margin-left: auto;
  61. }
  63. /* 栅格系统 */
  64. .row {
  65.     margin-right: –15px;
  66.     margin-left: –15px;
  67. }
  69. /* start 移动设备优先  xs 为 < 768px 的移动设备*/
  70. .col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
  71.     position: relative;
  72.     min-height: 1px;
  73.     padding-right: 15px;
  74.     padding-left: 15px;
  75. }
  76. .col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12 {
  77.     float: left;
  78. }
  79. .col-xs-12 {
  80.     width: 100%;
  81. }
  82. .col-xs-11 {
  83.     width: 91.66666667%;
  84. }
  85. .col-xs-10 {
  86.     width: 83.33333333%;
  87. }
  88. .col-xs-9 {
  89.     width: 75%;
  90. }
  91. .col-xs-8 {
  92.     width: 66.66666667%;
  93. }
  94. .col-xs-7 {
  95.     width: 58.33333333%;
  96. }
  97. .col-xs-6 {
  98.     width: 50%;
  99. }
  100. .col-xs-5 {
  101.     width: 41.66666667%;
  102. }
  103. .col-xs-4 {
  104.     width: 33.33333333%;
  105. }
  106. .col-xs-3 {
  107.     width: 25%;
  108. }
  109. .col-xs-2 {
  110.     width: 16.66666667%;
  111. }
  112. .col-xs-1 {
  113.     width: 8.33333333%;
  114. }
  115. .col-xs-pull-12 {
  116.     rightright: 100%;
  117. }
  118. .col-xs-pull-11 {
  119.     rightright: 91.66666667%;
  120. }
  121. .col-xs-pull-10 {
  122.     rightright: 83.33333333%;
  123. }
  124. .col-xs-pull-9 {
  125.     rightright: 75%;
  126. }
  127. .col-xs-pull-8 {
  128.     rightright: 66.66666667%;
  129. }
  130. .col-xs-pull-7 {
  131.     rightright: 58.33333333%;
  132. }
  133. .col-xs-pull-6 {
  134.     rightright: 50%;
  135. }
  136. .col-xs-pull-5 {
  137.     rightright: 41.66666667%;
  138. }
  139. .col-xs-pull-4 {
  140.     rightright: 33.33333333%;
  141. }
  142. .col-xs-pull-3 {
  143.     rightright: 25%;
  144. }
  145. .col-xs-pull-2 {
  146.     rightright: 16.66666667%;
  147. }
  148. .col-xs-pull-1 {
  149.     rightright: 8.33333333%;
  150. }
  151. .col-xs-pull-0 {
  152.     rightright: auto;
  153. }
  154. .col-xs-push-12 {
  155.     left: 100%;
  156. }
  157. .col-xs-push-11 {
  158.     left: 91.66666667%;
  159. }
  160. .col-xs-push-10 {
  161.     left: 83.33333333%;
  162. }
  163. .col-xs-push-9 {
  164.     left: 75%;
  165. }
  166. .col-xs-push-8 {
  167.     left: 66.66666667%;
  168. }
  169. .col-xs-push-7 {
  170.     left: 58.33333333%;
  171. }
  172. .col-xs-push-6 {
  173.     left: 50%;
  174. }
  175. .col-xs-push-5 {
  176.     left: 41.66666667%;
  177. }
  178. .col-xs-push-4 {
  179.     left: 33.33333333%;
  180. }
  181. .col-xs-push-3 {
  182.     left: 25%;
  183. }
  184. .col-xs-push-2 {
  185.     left: 16.66666667%;
  186. }
  187. .col-xs-push-1 {
  188.     left: 8.33333333%;
  189. }
  190. .col-xs-push-0 {
  191.     left: auto;
  192. }
  193. .col-xs-offset-12 {
  194.     margin-left: 100%;
  195. }
  196. .col-xs-offset-11 {
  197.     margin-left: 91.66666667%;
  198. }
  199. .col-xs-offset-10 {
  200.     margin-left: 83.33333333%;
  201. }
  202. .col-xs-offset-9 {
  203.     margin-left: 75%;
  204. }
  205. .col-xs-offset-8 {
  206.     margin-left: 66.66666667%;
  207. }
  208. .col-xs-offset-7 {
  209.     margin-left: 58.33333333%;
  210. }
  211. .col-xs-offset-6 {
  212.     margin-left: 50%;
  213. }
  214. .col-xs-offset-5 {
  215.     margin-left: 41.66666667%;
  216. }
  217. .col-xs-offset-4 {
  218.     margin-left: 33.33333333%;
  219. }
  220. .col-xs-offset-3 {
  221.     margin-left: 25%;
  222. }
  223. .col-xs-offset-2 {
  224.     margin-left: 16.66666667%;
  225. }
  226. .col-xs-offset-1 {
  227.     margin-left: 8.33333333%;
  228. }
  229. .col-xs-offset-0 {
  230.     margin-left: 0;
  231. }
  232. /* end xs 移动设备优先  xs 为 < 768px 的移动设备*/
  234. @media (min-width: 768px) {
  235.     /* 替换 xs 为 sm  768px – 992px */
  236. }
  237. @media (min-width: 992px) {
  238.     /* 替换 xs 为 md 992px – 1200px */
  239. }
  240. @media (min-width: 1200px) {
  241.     /* 替换 xs 为 lg 1200px – ~ */
  242. }
  244. .clearfix:before,
  245. .clearfix:after,
  246. .dl-horizontal dd:before,
  247. .dl-horizontal dd:after,
  248. .container:before,
  249. .container:after,
  250. .container-fluid:before,
  251. .container-fluid:after,
  252. .row:before,
  253. .row:after,
  254. .form-horizontal .form-group:before,
  255. .form-horizontal .form-group:after,
  256. .btn-toolbar:before,
  257. .btn-toolbar:after,
  258. .btn-group-vertical > .btn-group:before,
  259. .btn-group-vertical > .btn-group:after,
  260. .nav:before,
  261. .nav:after,
  262. .navbar:before,
  263. .navbar:after,
  264. .navbar-header:before,
  265. .navbar-header:after,
  266. .navbar-collapse:before,
  267. .navbar-collapse:after,
  268. .pager:before,
  269. .pager:after,
  270. .panel-body:before,
  271. .panel-body:after,
  272. .modal-footer:before,
  273. .modal-footer:after {
  274.     display: table;
  275.     content: ” “;
  276. }
  277. .clearfix:after,
  278. .dl-horizontal dd:after,
  279. .container:after,
  280. .container-fluid:after,
  281. .row:after,
  282. .form-horizontal .form-group:after,
  283. .btn-toolbar:after,
  284. .btn-group-vertical > .btn-group:after,
  285. .nav:after,
  286. .navbar:after,
  287. .navbar-header:after,
  288. .navbar-collapse:after,
  289. .pager:after,
  290. .panel-body:after,
  291. .modal-footer:after {
  292.     clear: both;
  293. }
  294. /*# sourceMappingURL=bootstrap.css.map */
  296. .show-grid {
  297.     margin-bottom: 15px;
  298. }
  299. .show-grid [class^=“col-“] {
  300.     padding-top: 10px;
  301.     padding-bottom: 10px;
  302.     background-color: #eee;
  303.     background-color: rgba(86,61,124,.15);
  304.     border: 1px solid #ddd;
  305.     border: 1px solid rgba(86,61,124,.2);
  306. }

html代码部分：

  1. <div class=“container”>
  2.         <div class=“row show-grid”>
  3.             <div class=“col-md-offset-4 col-md-4”>welcome to wenqy.com</div>
  4.         </div>
  5.         <div class=“row show-grid”>
  6.             <div class=“col-md-1”>.col-md-1</div>
  7.             <div class=“col-md-1”>.col-md-1</div>
  8.             <div class=“col-md-1”>.col-md-1</div>
  9.             <div class=“col-md-1”>.col-md-1</div>
  10.             <div class=“col-md-1”>.col-md-1</div>
  11.             <div class=“col-md-1”>.col-md-1</div>
  12.             <div class=“col-md-1”>.col-md-1</div>
  13.             <div class=“col-md-1”>.col-md-1</div>
  14.             <div class=“col-md-1”>.col-md-1</div>
  15.             <div class=“col-md-1”>.col-md-1</div>
  16.             <div class=“col-md-1”>.col-md-1</div>
  17.             <div class=“col-md-1”>.col-md-1</div>
  18.         </div>
  19.         <div class=“row show-grid”>
  20.             <div class=“col-md-4”>.col-md-4</div>
  21.             <div class=“col-md-4”>.col-md-4</div>
  22.             <div class=“col-md-4”>.col-md-4</div>
  23.         </div>
  24.         <div class=“row show-grid”>
  25.             <div class=“col-md-8”>.col-md-8</div>
  26.             <div class=“col-md-4”>.col-md-4</div>
  27.         </div>
  28.         <div class=“row show-grid”>
  29.             <div class=“col-md-6”>.col-md-6</div>
  30.             <div class=“col-md-6”>.col-md-6</div>
  31.         </div>
  32.         <div class=“row show-grid”>
  33.             <div class=“col-md-12”>.col-md-12</div>
  34.         </div>
  35.         <div class=“row  show-grid”>
  36.             <div class=“col-xs-9”>.col-xs-9</div>
  37.             <div class=“col-xs-4”>.col-xs-4<br>Since 9 + 4 = 13 &gt; 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div>
  38.             <div class=“col-xs-6”>.col-xs-6<br>Subsequent columns continue along the new line.</div>
  39.         </div>
  41.         <div class=“row show-grid”>
  42.             <div class=“col-xs-12 col-sm-6 col-md-8”>.col-xs-12 .col-sm-6 .col-md-8</div>
  43.             <div class=“col-xs-6 col-md-4”>.col-xs-6 .col-md-4</div>
  44.         </div>
  46.     </div>

图片自适应

随屏幕大小自动缩放

  1. img {
  2.     max-width:100%;
  3. }

老版本IE不支持max-width，可以采用：

  1. img {
  2.     width: 100%;
  3. }

字体相对大小

字体也不能使用绝对大小（px），而只能使用相对大小（em）。

  1. body {
  2. 　　font: normal 100% Helvetica, Arial, sans-serif;
  3. }

字体大小是页面默认大小的100%，即浏览器默认像素大小。

  1. h2 {
  2. 　　font-size: 1.5em;
  3. }

h2的大小是默认大小的1.5倍。

相对宽度

由于网页会根据屏幕宽度调整布局，所以不能使用绝对宽度的布局，也不能使用具有绝对宽度的元素。这一条非常重要。

具体说，CSS代码不能指定像素宽度：

　　width:xxx px;

只能指定百分比宽度：

　　width: xx%;

或者

　　width:auto;

初窥boostrap源码，了解响应式设计的原理，主要是利用媒体查询编辑相应的样式。响应式也是有缺点的，加载的东西多了，可能会影响性能。

参考：

自适应网页设计（Responsive Web Design） http://www.ruanyifeng.com/blog/2012/05/responsive_web_design.html

响应式网页设计简单入门

http://www.cnblogs.com/Wayou/p/responsive_design_step_by_step.html#homehttp://v3.bootcss.com/css/#grid

http://baike.baidu.com/item/css%20hack

当你老了 – 莫文蔚–:– / 03:18
(*+﹏+*)

小二，再来一碟

赏

发表评论

电子邮件地址不会被公开。 必填项已用*标注

0 + 1 = ?