深度解析響應式佈局

概念

響應式佈局，就是響應式設計方案的呈現。具體點就是在不一樣的設備上，網頁能自動識別屏幕寬度、並根據設備的顯示面積（通常狀況下是指的屏幕寬度，固然，也能夠是其餘的，能夠在下面詳細解釋）顯示出不一樣的效果。通俗點就是設計一套佈局，在PC端和移動端均可以使用。 

如何實現響應式佈局？

通俗的有三種方法

1、百分比

經過將每一個盒子的寬度設定百分比來實現。

優勢：簡單方便要

缺點:在額外設置margin、padding時，或者使用不一樣瀏覽器時，會使得佈局混亂 

2、meta標籤

代碼段爲：

<meta name="viewport" content="width=device-width, initial-scale=1" /> 

這主要是爲了讓代碼適應移動端的屏幕，其中，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文件多是多個，也多是單個。

 

寫在不是最後的最後，雖然本題是說的深度解析，但其實也只是說了響應式的淺表問題，優化響應式的代碼還有其餘的方法，須要人去不斷的研究，提升，若是有錯，歡迎各位斧正。