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的說明，大家可以百度一下。