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的說明，你們能夠百度一下。