注：未整理完
近幾年整個社會發生了翻天覆地的變化，各種智能手機，pad，之類的移動端設備隨處可見。那么，程序員界就刮起了一陣風暴，大家在思考 “ 如何讓我們的網站在各種移動端設備上都能布局合理呢？ ”為每一個設備寫一套代碼自然是非常麻煩的。那么，聰明的程序員們想到了一個辦法，“ 我只要一套代碼，就能讓我的網站在不同大小的設備上正確顯示 ”。於是，響應式設計模型誕生啦！其核心就是“媒體查詢”技術。
接下來，讓我們了解一下，如何實現一個網站的響應式設計
第一、 meta標簽
在網頁的頭部要添加下面一行代碼，看下面的參數解釋就知道這一行代碼的意思了
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
width=device-width ： 網頁寬度等於設備寬度
initial-scale=1.0 ： 初始縮放比例為1.0 。網頁初始頁面的大小占整個面積的100%
maximum-scale=1.0 ： 最大縮放比例為1.0 ，
user-scalable ： 用戶是否可以手動縮放
第二、 加載ie瀏覽器的兼容性文件
因為IE9，IE6、7、8不支持媒體查詢，所以必須加載以下文件
<!--[if lt IE 9]> <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script> <![endif]-->
第三、 設定渲染方式
有時候會遇到一個很詭異的問題：為什么我的IE瀏覽器都升級到IE9以上了，但是瀏覽器的文檔模式卻是IE8
怎么解決這個問題呢？
<meta http-equiv="X-UA-Compatible" content="IE=edge">
這句話可以保證讓IE的文檔模式永遠都是最新的
還有一種更高級的寫法：
<meta http-equiv="X-UA-Compatible" content="IE=Edge，chrome=1">
什么意思呢？
怎么這段代碼后面加了一個chrome=1，這個Google Chrome Frame（谷歌內嵌瀏覽器框架GCF），如果有的用戶電腦里面裝了這個chrome的插件，就可以讓電腦里面的IE不管是哪個版本的都可以使用Webkit引擎及V8引擎進行排版及運算，無比給力，不過如果用戶沒裝這個插件，那這段代碼就會讓IE以最高的文檔模式展現效果。
第四、 使用單位
使用百分比，em， rem
第四、 怎樣編寫媒體查詢代碼
第五、 怎樣引入@media規則
第六、 如何做到圖片自適應