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

响应式布局是最近几年在前端开发中非常火热的词，它是相对于固定像素大小的网页而言的，那么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的说明，大家可以百度一下。