CSS响应式布局到底是什么?


移动前端

零度逍遥

2014-08-12 23:47:33

响应式布局是最近几年在前端开发中非常火热的词,它是相对于固定像素大小的网页而言的,那么CSS响应式布局到底是什么?顾名思义,响应式布局就是网页能够响应各种各样不同分辨率大小的设备,能够将网页很好的呈献给用户,也因此受到很多前端开发人员的追捧,可能很多人早就已经知道甚至已经用过响应式布局来制作网页,但今天零度还是希望给大家分享一些关于响应式布局的知识,不足之处还请大家指正。

先来看下面一段代码:


body {
background-color: #ccc;
}
@media screen and (max-width: 1000px) {
body {
background-color: blue;
}
}
@media screen and (max-width: 800px) {
body {
background-color: red;
}
}
@media screen and (max-width: 600px) {
body {
background-color: black;
}
}
@media screen and (max-width: 400px) {
body {
background-color: green;
}
}
把这段css代码添加到你的网页中,然后缩小浏览器,你会发现网页的颜色会伴随着你的浏览器宽度变化而变色,这就是css的媒体查询功能,根据浏览器视口宽度的不同来加载不同的css样式。


当然我们完全可以使用link方式,写成如下:


<link rel="stylesheet" media="screen and (min-width:800px)" href="800wide.css" />
这样就是表示只有视口宽度大于800像素的屏幕设备才会加载800wide这个css文件。


通过媒体查询来加载不同的css,这是响应式布局的核心,媒体查询的方法当然也有很多,具体的以后再说,大家也可以自行百度一下,网上关于这方面的资料也很多,具体的更加深入的响应式布局,我会在以后再和大家分享我的心得。

值得注意的是在脑残的IE6~8中是不知道media属性的,要添加一个respond.js文件才行,给出bootstrap提供的cdn链接,大家可以直接用。

<script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.js"></script>

更多关于respond.js的说明,大家可以百度一下。