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

自从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-right15px;
  3.   padding-left15px;
  4.   margin-rightauto;
  5.   margin-leftauto;
  6. }
  7. /* 超小屏幕(手机,小于 768px) */
  8. /* 没有任何媒体查询相关的代码,因为这在 Bootstrap 中是默认的( Bootstrap 是移动设备优先) */
  9. /* 小屏幕(平板,大于等于 768px) */
  10. @media (min-width768px) {
  11.   .container {
  12.     width750px;
  13.   }
  14. }
  15. /* 中等屏幕(桌面显示器,大于等于 992px) */
  16. @media (min-width992px) {
  17.   .container {
  18.     width970px;
  19.   }
  20. }
  21. /* 大屏幕(大桌面显示器,大于等于 1200px) */
  22. @media (min-width1200px) {
  23.   .container {
  24.     width1170px;
  25.   }
  26. }

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

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

100% 宽度

直接针对流式布局:

  1. .container-fluid {
  2.   padding-right15px;
  3.   padding-left15px;
  4.   margin-rightauto;
  5.   margin-leftauto;
  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. .col-*-12 {
  8.     width: 100%;
  9. }

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

先来看下样例效果图:

bootstrap_response

css样式修饰部分:

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

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>
  40.         <div class=“row show-grid”>
  41.             <div class=“col-xs-12 col-sm-6 col-md-8”>.col-xs-12 .col-sm-6 .col-md-8</div>
  42.             <div class=“col-xs-6 col-md-4”>.col-xs-6 .col-md-4</div>
  43.         </div>
  44.     </div>

图片自适应

随屏幕大小自动缩放

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

老版本IE不支持max-width,可以采用:

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

字体相对大小

字体也不能使用绝对大小(px),而只能使用相对大小(em)。

  1. body {
  2.   fontnormal 100% HelveticaArialsans-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
(*+﹏+*)

发表评论

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

23 + 1 = ?