一、簡單描述：
隨著移動網際網路的盛行，為解決如今各式各樣的瀏覽器解析度以及不同移動裝置的顯示效果， 設計師提出了響應式布局的設計方案。
簡而言之，就是乙個**能夠相容多個終端——而不是為每個終端做乙個特定的版本。這個概念是為解決移動網際網路瀏覽而誕生的。
響應式布局是基於css3的媒介查詢（media query）特性使得網頁適應不同裝置，即根據裝置的解析度和縮放自動重新布局。
二、響應式布局原理：
3個步驟中學習到響應式設計和媒介查詢（media queries）的基本原理
第一步：meta標籤
大多數移動瀏覽器將html頁面放大為寬的檢視（viewport）以符合螢幕解析度。你可以使用檢視的meta標籤來進行重置。下面的檢視標籤告訴瀏覽器，使用裝置的寬度作為檢視寬度並禁止初始的縮放。在標籤裡加入這個meta標籤。
ie8或者更早的瀏覽器並不支援media query。你可以使用media-queries.js或者respond.js來為ie新增media query支援。
第二步：html結構
由於網頁會根據螢幕寬度調整布局，所以不能使用絕對寬度的布局，也不能使用具有絕對寬度的元素。這一條非常重要。
字型也不能使用絕對大小（px），而只能使用相對大小（em）。
第三步：媒介查詢-media queries
css3 media query-媒介查詢是響應式設計的核心。它根據條件告訴瀏覽器如何為指定檢視寬度渲染頁面。
媒介查詢的目的在於為指定的檢視寬度指定不同的css規則，來實現不同的布局。媒介查詢可以寫在同乙個或者單獨的樣式表中。
三、響應式布局優點和缺點：
優點：1. 面對不同解析度裝置靈活性強
2. 能夠快捷解決多裝置顯示適應問題
缺點：1. 相容各種裝置工作量大，效率低下
2. **累贅，會出現隱藏無用的元素，載入時間加長
3. 其實這是一種折衷性質的設計解決方案，多方面因素影響而達不到最佳效果
4. 一定程度上改變了**原有的布局結構，會出現使用者混淆的情況
1、2、
自適應網頁設計 自適應網頁設計技巧
隨著3g的普及，越來越多的人使用手機上網。移動裝置正超過桌面裝置，成為訪問網際網路的最常見終端。於是，網頁設計師不得不面對乙個難題 如何才能在不同大小的裝置上呈現同樣的網頁？手機的螢幕比較小，寬度通常在600畫素以下 pc的螢幕寬度，一般都在1000畫素以上 目前主流寬度是1366 768 有的還達...
自適應網頁設計
隨著3g的普及，越來越多的人使用手機上網。移動裝置正超過桌面裝置，成為訪問網際網路的最常見終端。於是，網頁設計師不得不面對乙個難題 如何才能在不同大小的裝置上呈現同樣的網頁？手機的螢幕比較小，寬度通常在600畫素以下 pc的螢幕寬度，一般都在1000畫素以上 目前主流寬度是1366 768 有的還達...
自適應網頁設計
自適應網頁設計 允許網頁寬度自動調整 允許網頁寬度自動調整 自適應網頁設計 首先，在網頁 的頭部，加入一行viewport元標籤。viewport是網頁預設的寬度和高度，上面這行 的意思是，網頁寬度預設等於螢幕寬度 width device width 原始縮放比例 initial scale 1 ...