概念
響應式布局，就是響應式設計方案的呈現。具體點就是在不同的裝置上，網頁能自動識別螢幕寬度、並根據裝置的顯示面積（一般情況下是指的螢幕寬度，當然，也可以是其他的，可以在下面詳細解釋）顯示出不同的效果。通俗點就是設計一套布局，在pc端和移動端都可以使用。
如何實現響應式布局？
通俗的有三種方法
1、百分比
通過將每個盒子的寬度設定百分比來實現。
優點：簡單方便要
缺點:在額外設定margin、padding時，或者使用不同瀏覽器時，會使得布局混亂
2、meta標籤
**段為：
這主要是為了讓**適應移動端的螢幕，其中，viewport 是指需要載入meta 標籤時讀取的名字為「視口」，其中的 width 需要等於 device-width（裝置寬度），主要是告訴瀏覽器，將布局視口的寬度設定為裝置最理想的寬，initial-scale（縮放比例） 為1，這樣就保證了載入的時候，要獲取裝置的寬度，同時要保持原始大小，便於**查詢
3、@media**查詢
css**段為：
@media screen and (min-width: 10rem) and (max-width: 20rem)
這裡面的 第乙個 screen 意思為螢幕，這裡面還有許多 引數，包括all（用於所有裝置）、print（用於印表機和列印預覽）、speech（應用於螢幕閱讀器等發聲裝置）。
使用and來並列顯示多種情況，min-width 和max-width 來定義在那種尺寸的螢幕上顯示，這就是響應式的靈魂。
上面的例子，就是 **查詢螢幕，最小寬度為10rem 最大寬度我20rem 的裝置寬度上來實現大括號內的樣式或者其他功能，這裡面的rem也可以換成px或者em之類的單位等。
優點：現在大部分的響應式布局都是使用@media 來實現的，可以書寫大量的公共樣式，在需要適應螢幕的時候，在大括號內加入相應的功能即可實現響應式布局。
缺點：可能需要對同乙個類書寫不同的樣式，**比較繁複，難度也稍微難點。
在應用中使用哪種方法實現響應式？
沒有哪一種方法是完美的，推薦的是三種方法交替使用，在恰當的地方使用恰當的方法。
在布局過程中，一般都是寬度的百分比與**查詢交替使用的，並且在載入網頁之前，加入meta標籤，定義一下viewport的內容，這樣更方便於移動端的響應。也兼顧了裝置的相容性。
而響應式的設計方案的一般做法就是根據目標使用者的訪問裝置的主要型別做三種或四種布局。每種布局有乙個區間，比如說小屏的手機分解析度可以設定為[320,640]。然後分別設計每種布局即可，一般來說，各個布局主要是調整模組的排列布局順序，內容調整越少越好（儘量減少使用者適應成本）。
響應式優點
與以往的彈性盒子相比，響應式布局會更好的、更主動的根據使用者裝置變化更呈現出不同的效果，它比彈性盒子更靈活，可讀性更強。響應式的一套方案解決所有裝置的自適應問題。
響應式缺點
研發難度高，對應的css檔案可能是多個，也可能是單個。
響應式布局 響應式布局技巧
一理解幾種布局的概念 1 靜態布局 static layout 即傳統web設計，對於pc設計乙個layout，在螢幕寬高有調整時，使用橫向和豎向的滾動條來查閱被遮掩部分 意思就是不管瀏覽器尺寸具體是多少，網頁布局就按照當時寫 的布局來布置 對於移動裝置，單獨設計乙個布局，使用不同的網域名稱如wap...
響應式布局
裝置高度 device width,device height 渲染視窗的寬高 width,height 裝置的手持方向 orientation 裝置的解析度 resolution 使用方法 用外聯或者內嵌樣式 或者兩者同時搭配使用。裝置高度 device width,device height 表...
響應式布局
首先，什麼是響應式布局呢？響應式布局是2010年5月提出的乙個概念，簡單地說就是乙個 能夠相容多個終端，而不是為每個終端做乙個特定的版本。這個概念是為了解決移動網際網路瀏覽器而產生的，目的是為使用者提供更加舒適的介面以及良好的使用者體驗。優點 1.面對不同解析度裝置靈活性強 2.能夠方便的解決多裝置...