bootstrap 响应式布局

先上点媒体查询css（某个著名的”段子“），跟bootstrap无关：

<html>
<head>
<style>
body {  
    background-color: white;  
}  
@media screen and (max-width: 960px){  
    body {  
        background-color: red;  
    }  
}  
@media screen and (max-width: 768px){  
    body {  
        background-color: yellow;  
    }  
}  
@media screen and (max-width: 550px){  
    body {  
        background-color: green;  
    }  
}  
@media screen and (max-width: 320px){  
    body {  
        background-color: blue;  
    }  
}
</style>
</head>
<body>
</body>
</html>

保存以上文件为test.html, 然后用浏览器打开。缩放浏览器看效果。（ps：如果看不到任何效果，说明你的浏览器太老了，不支持css3）

 

再来说bs的布局：默认情况下，bs认为你是在为移动设备编写样式！

注意这句，但前提是，网页的head里要加这么一段：

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">

然后，就可以愉快的忽略上面css样式的问题。不用为了某个尺寸的设备写一大堆重复的代码。

当然， 必要时需要写少量代码，做某个尺寸设备的适配。配合 :

visible-lg/sm/md

hidden-xs/sm/md/lg 

来动态显示，宽度比例的调整根据col-lg/md/sm/xs-1～12 来做。

posted @ 2016-07-22 14:52  tommy.yu  阅读(337)  评论(0)  编辑  收藏  举报