通過CSS3 Media Query實現響應式Web設計
一、響應式設計（一）響應式設計初識，一個小小的demo，用來理解什么是響應式
今天的一個小小的demo，讓我重新的認識了什么是響應式網頁設計。我之前一直以為主要一個網頁在不同的設備上瀏覽，網頁可以自適應設備的屏幕大小，而不發生結構變形。
其實我覺得更准確去說是：根據不同的用戶設備環境，頁面可以做出不同的響應動作，
例如：在pc端瀏覽一行圖片，看到的個數是4個，用手機看到的是2個圖片，不同用戶的設備環境，做出了不同的響應動作。
二、百度百科給出的概念：
響應式Web設計(Responsive Web design)的理念是：
頁面的設計與開發應當根據用戶行為以及設備環境(系統平台、屏幕尺寸、屏幕定向等)進行相應的響應和調整。具體的實踐方式由多方面組成，包括彈性網格和布局、圖片、CSS media query的使用等。無論用戶正在使用筆記本還是iPad，我們的頁面都應該能夠自動切換分辨率、圖片尺寸及相關腳本功能等，以適應不同設備；換句話說，頁面應該有能力去自動響應用戶的設備環境。響應式網頁設計就是一個網站能夠兼容多個終端——而不是為每個終端做一個特定的版本。這樣，我們就可以不必為不斷到來的新設備做專門的版本設計和開發了
三、用一個最簡單的小demo來理解什么是響應式設計，以及是如何設計
html代碼：
1 <!DOCTYPE html> 2 <html lang="zh-CN"> 3 <head> 4 <title>demo1</title> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 7 8 <link rel="stylesheet" type="text/css" href="style/style.css"/> 9 <link rel="stylesheet" type="text/css" href="style/normalize.css"/> 10 <!--[if lt IE 9]> 11 <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> 12 <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script> 13 <![endif]--> 14 15 </head> 16 <body> 17 <header class="head"> 18 <div class="menu"> 19 <ul> 20 <a href="#"><li>1</li></a> 21 <a href="#"><li>1</li></a> 22 <a href="#"><li>1</li></a> 23 <a href="#"><li>1</li></a> 24 </ul> 25 </div> 26 </header> 27 <section class="main">小紅在認真學習。。。。</section> 28 </body> 29 </html>
解釋一下上面幾行代碼的含義：
代碼行5——表示最新版本的IE內核進行渲染。不理解可以看看這個http://www.oschina.net/question/54100_17414
代碼行9——引入一個css重置文件，網上搜索的到，下下來就是。
代碼行10-13——是為了兼容IE9瀏覽器，這是引入別人寫好的js文件。省去我們在開發過程中要去判斷IE9是否支持這個標簽的步驟。因為這個在html5shiv.js,別人幫我寫好了。
css代碼：（normalize.css的那個文件可以直接在網上搜下，下載）
1 .head{ 2 width:100%; 3 height:100px; 4 position:fixed; 5 background:#FF9900; 6 top:0px; 7 left:0px; 8 } 9 .menu{ 10 width:80%; 11 height:100px; 12 margin:0 auto; 13 background:blue; 14 margin-top 15 } 16 .menu ul{ 17 float:right; 18 } 19 .menu li { 20 float:left; 21 margin-top:40px; 22 list-style:none; 23 margin-left:30px; 24 color:#FFF; 25 26 } 27 .main{ 28 width:80%; 29 height:3000px; 30 margin:0 auto; 31 background:red; 32 margin-top:100px; 33 } 34 35 @media all and (max-width:300px){ 36 .head{ 37 width:50%; 38 height:50px; 39 background:pink; 40 41 } 42 } 43 @media all and (max-width:900px) and (min-width:300px){ 44 .head{ 45 width:50%; 46 height:50px; 47 background:black; 48 } 49 }
css文件說明：
有三個div，頭部head、中間contain部分，以及在頭部給出了一個書寫導航欄的menu。可以試試用瀏覽器正常打開，看到的結果是這樣的：
可以看到三個div的排版是這樣的。
哈哈，下面就開始做一些響應式的內容了。
實現響應式的標簽是@media
我就根據設備的最大寬度為300px和600px到900px時，讓瀏覽器做出不同的響應。
（1）最大寬度為300px，瀏覽器的響應應該是：頭部div變成一個高度為粉色、高度為50px的div
@media all and (max-width:300px){
.head{
width:50%;
height:50px;
background:pink;
}
在@media 里面，寫上你，當設備環境改變，要發生響應的樣式內容。例如：上例的
.head{
width:50%;
height:50px;
background:pink;
這就是對headdiv做出響應
縮小瀏覽器窗口，看到了頭部的div變成了高度為50px的粉色div（PS：暫時先不要管藍色跟紅色的div，樣式很丑，因為我沒有設置對着兩個div根據設置環境也做出不同的響應。哈哈，所以暫時忽略。在這里要了解的是什么是響應式，頭部head div是如何響應的）
（2）寬度為600px-900px
同理的，縮小瀏覽器窗口到一定范圍內，看到一個黑色的頭部div。
四、總結
響應式設計的小demo，寫篇日志，紀念一下，哈哈
在響應式的學習路上，我想進步！