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的说明，你们能够百度一下。