響應式布局
響應式布局是現在很流行的一個設計理念，随着移動網際網路的盛
行，為解決如今各式各樣的浏覽器分辨率以及不同移動裝置的顯示效
果，設計師提出了響應式布局的設計方案。所謂的響應式布局，就是
一個網站能夠相容多個終端——而不是為每個終端做一個特定的版本。
也就說一個頁面可以在多個終端呈現出你想要的效果，能夠相容各個
終端。
響應式布局的優缺點
優點：
面對不同分辨率裝置靈活性強
能夠快捷解決多裝置顯示适應問題
根據不同的顯示器調整設計最适合使用者浏覽習慣的頁面
缺點：
相容各種裝置工作量大，效率低下
代碼累贅，會出現隐藏無用的元素，加載時間加長
其實這是一種折衷性質的設計解決方案，多方面因素影響而達不到最佳效果
因為要适應不同的裝置，頁面的結構可能會有所不同，會導緻頁面的辨識度不強
利用CSS3-Media Query實作響應式布局
1、media query：
通過不同的媒體類型和條件定義樣式表規則。媒體查詢讓CSS可以更精确作用于不同的媒體類型和同一媒體的不同條件
2、文法結構及用法
@media 裝置名 only （選取條件） not (選取條件) and （裝置選取條件），裝置二 {sRules}
(1)在link中使用@media：
（2）在樣式表中内嵌@media：
特殊裝置檢測
1.Phone4
<link rel="stylesheet" media="only screen and (-webkit-min-device-pixel-ratio: 2)"
type="text/css" href="iphone4.css" />
2.iPad
<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css"
type="text/css" />
<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css"
3.android
/*240px的寬度*/
<link rel="stylesheet" media="only screen and (max-device-width:240px)"
href="android240.css" type="text/css" />
/*360px的寬度*/
<link rel="stylesheet" media="only screen and (min-device-width:241px) and (max-device-
width:360px)" href="android360.css" type="text/css" />
/*480px的寬度*/
<link rel="stylesheet" media="only screen and (min-device-width:361px) and (max-device-
width:480px)" href="android480.css" type="text/css" />