### 響應式布局有哪些優點和缺點 **優點：**? 面對不同分辨率設備靈活性強? 能夠快捷解決多設備顯示適應問題? **缺點：**? 兼容各種設備工作量大，效率低下?代碼累贅，會出現隱藏無用的元素，加載時間加長? 其實這是一種折衷性質的設計解決方案，多方面因素影響而達不到最佳效果? 一定程度上改變了網站原有的布局結構，會出現用戶混淆的情況 ### 1、Media Query CSS3中的Media Query（媒介查詢） Media Query是制作響應式布局的一個利器，使用這個工具，我們可以非常方便快捷的制造出各種豐富的實用性強的界面。根據視窗的大小自動調整布局。 **1、通過不同的媒體類型和條件定義樣式表規則。** 媒體查詢讓CSS可以更精確作用于不同的媒體類型和同一媒體的不同條件。媒體查詢的大部分媒體特性都接受 min和max用于表達”大于或等于”和”小與或等于”。如：width會有min-width和max-width媒體查詢可以被用在CSS中的 @media和@import規則上，也可以被用在HTML和XML中。通過這個標簽屬性，我們可以很方便的在不同的設備下實現豐富的界面 **2、Media能獲得的值** 設備的寬和高: device-width,device-height顯示屏幕/觸覺設備 渲染窗口的寬和高: width，heigth顯示屏幕/觸覺設備 設備的手持方向: orientation(portrait|lanscape) 橫向/豎向 畫面比例: aspect-ratio 瀏覽器的長寬比 屏幕比例: device-aspect-ratio 設備屏幕的長寬比，如4/3,16/9等。 視覺媒體: color 定義每一組輸出設備的彩色原件個數，如果不是彩色設備，則值等于0 分辨率: resolution 定義設備的非暴力，如:96dpi,300dpi 以上僅僅orientation不支持max,min. **3、可用設備參數名** all 所有設備 braille 盲文 embossed 盲文打印 handheld 手持設備 print 文檔打印或者打印預覽模式 projection項目演示(如幻燈片) screen 彩色電腦屏幕 tty 固定字母間距的網絡媒體，如電傳打字機 **4、邏輯關鍵字** only 限定某種設備類型 and 邏輯與，連接設備名與選擇條件、選擇條件1與選擇條件2 not 排除某種設備(除了什么之外) , 設備列表 **5、語法結構及用法** @media 設備名 only (選取條件) not (選取條件) and (設備選取條件), 設備二{sRules} 在link中使用@media: <link rel = "stylesheet" type = "text/css" media = "only screen and (max-width： 640px),only screen and (max-device-width： 640px)" href = “home.css”/>? only可以省略，第一個條件是網頁的最大寬度是640，第二個條件是設備的最大寬度是640px。? @media (min-device-width:1024px) and (max-width:989px), screen and (max-device-width:480px),(max-device-width:480px) and (orientation:landscape),(min-device-width:480px) and (max-device-width:1024px) and (orientation:portrait) {//code}? 電腦屏幕尺寸不小于1024px，并且最大的可見寬度為989px;設備最大寬度為480px，并且橫向放置，設備寬度不小于480px，并且小于1024px，豎直放置的設備。? 字符間以空格相連，選取條件包含在小括號內，code為設置的樣式表，包含在中括號里面。only（限定某種設備，可省略），and（邏輯與），not（排除某種設備）為邏輯關鍵字，多種設備用逗號分隔.? **6、測試響應式布局**? 響應式布局需要在不同的設備上測試，可以使用瀏覽工具來檢驗不同尺寸屏幕小的顯示效果。幫助你在不同尺寸屏幕下瀏覽網站效果的工具 - Responsivator?[http://responsive.d3corp.com/?d3corp.com](http://responsive.d3corp.com/?d3corp.com) **7、響應式布局設計** ~~~ /*瀏覽器的可視區域不小于980px*/ @media screen and (min-width:980px){ .head{width:100%; height:70px; } .head #logo{position:fixed; top:0px; left:50px;} .head nav{ width:870px;background:#fff;height:70px; margin:0 auto;} .head nav a{ width:100px; height:40px; margin:15px 0px; display:inline-block; } } /*瀏覽器的可視區域在640px和980px之間*/ @media screen and (min-width:640px) and (max-width:980px){ .head{width:70px;height:870px;} .head nav{ width:70px;background:#fff;height:870px;margin-top:20px;} .head nav a{ width:70px; height:40px; margin:15px 0px; display:inline-block; } } /*瀏覽器的可視區域小于640px*/ @media screen and (max-width:640px){ .head{width:256px; height:256px;position:fixed; bottom:20px; left:20px;} .head #logo{position:absolute; top:0px; left:0px; right:0; bottom:0; padding:auto; margin:auto;} .head nav{width:256px; height:256px;background-color:rgba(0,0,0,0.6); border-radius:50%; transform:scale(0.1) rotate(-270deg); opacity:0; transition:all 500ms;margin-top:0px;} .head nav a{display:block; width:40px;height:40px;border-radius:50%; position:absolute;margin-left:-20px; margin-top:-20px; } ~~~ 為了更好的顯示效果，往往還要格式化一些CSS屬性的初始值，如： ~~~ /* 禁用iPhone中Safari的字號自動調整 */ 　　html { 　　-webkit-text-size-adjust： none; 　　} 　　/* 設置HTML5元素為塊 */ 　　article， aside， details， figcaption， figure， footer， header， hgroup， menu， nav， section { 　　display： block; 　　} ~~~ ### 2、利用meta標簽對viewport進行控制 移動設備默認的viewport是layout viewport，也就是那個比屏幕要寬的viewport，但在進行移動設備網站的開發時，我們需要的是ideal viewport。? 設置width為decice-width; ~~~ <meta name="viewport" content="width=device-width; initial-scale=1.0"> ~~~ 　content中參數設置:? 　　width – viewport的寬度? 　　height – viewport的高度,這個屬性很少使用? 　　initial-scale – 初始的縮放比例? 　　minimum-scale – 允許用戶縮放到的最小比例? 　　maximum-scale – 允許用戶縮放到的最大比例? 　　user-scalable – 用戶是否可以手動縮放 no或者yes? 　　最后對于在IE瀏覽器中不支持media query的情況，我們可以使用Media Query JavaScript來解決，只需要在頁面頭部引用css3-mediaqueries.js即可。示例：? IE8及低版本瀏覽器不支持CSS3 media queries的解決方法? 另外關于IE8低版本兼容問題可參考：[http://blog.csdn.net/wuruixn/article/details/8642934](http://blog.csdn.net/wuruixn/article/details/8642934)