响应式布局及其实用类

所谓响应式布局，就是根据浏览尺寸的不同，做出相应的变化

 

其原理是利用 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-width: 767px) {
24             body{
25                 background: #f00000;
26             }
27         }
28     </style>
29 </head>
30 <body>
31 
32 </body>
33 </html>
响应式布局简单举例

上面用到了 max-width，其在窗口小于指定值的时候触发，还可以使用 min-width，表示在大于指定值的时候触发

也可以组合使用，(max-width:v1) and (min-width: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　在电脑上隐藏该元素，其他地方显示该元素

 

posted @ 2016-08-06 21:54  csnmd  阅读(282)  评论(0)  编辑  收藏  举报