所谓响应式布局，就是根据浏览尺寸的不同，做出相应的变化
其原理是利用 CSS3 的 media queries 判断浏览窗口的尺寸
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Media Queries</title> 6 <link type="text/css" rel="stylesheet" href="../../resources/bootstrap-2/css/bootstrap.css"> 7 <script type="text/javascript" src="../../resources/bootstrap-2/js/bootstrap.js"></script> 8 <script type="text/javascript" src="../../resources/jQuery/jquery-1.12.4.min.js"></script> 9 10 11 <script type="text/javascript" src="../../resources/js/html5.js"></script> 12 <!--解决手机上的显示问题--> 13 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 14 <!--解决IE低版本问题--> 15 <!--[if lt IE9]> 16 <script type="text/javascript" src="../../resources/js/html5.js"></script> 17 <![endif]--> 18 <style> 19 body{ 20 background: #000000; 21 } 22 /*当浏览器窗口宽度小于767像素的时候,重新设置样式*/ 23 @media (max- 767px) { 24 body{ 25 background: #f00000; 26 } 27 } 28 </style> 29 </head> 30 <body> 31 32 </body> 33 </html>
上面用到了 max-width，其在窗口小于指定值的时候触发，还可以使用 min-width，表示在大于指定值的时候触发
也可以组合使用，(max-v1) and (min-v2)，表示在这个区间内的时候触发样式
如何把固定样式的布局改成响应式布局呢？
只需要添加
<link type="text/css" rel="stylesheet" href="../../resources/bootstrap-2/css/bootstrap-responsive.css">
BootStrap已经预先定义好了常用浏览窗口尺寸的处理方式
- 实用类
:visible-phone 在手机上显示该元素，其他地方隐藏
:visible-tablet 在平板上显示该元素，其他地方隐藏
:visible-desktop 在电脑上显示该元素，其他地方隐藏
:hidden-phone 在手机上隐藏该元素，其他地方显示该元素
:hidden-tablet 在平板上隐藏该元素，其他地方显示该元素
:hidden-desktop 在电脑上隐藏该元素，其他地方显示该元素