深度解析響應式佈局

概念

響應式佈局，就是響應式設計方案的呈現。具體點就是在不同的裝置上，網頁能自動辨識螢幕寬度、並根據裝置的顯示面積（一般情況下是指的螢幕寬度，當然，也可以是其他的，可以在下面詳細解釋）顯示出不同的效果。通俗點就是設計一套佈局，在PC端和行動端都可以使用。  

如何實現響應式佈局？

通俗的有三種方法

1、百分比

通過將每個盒子的寬度百分比來實現。

優點：簡單方便要

缺點:在額外設定margin、padding時，或使用不同瀏覽器時，會讓版面混亂 

。 代碼段為：

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

這主要是為了讓代碼適應移動端的屏幕，其中，viewport 是指需要加載meta 標籤時讀取的名字為“視口”，其中的width 需要等於device-width （設備寬度），主要是告訴瀏覽器，將佈局視口的寬度設定為設備最理想的寬，initial-scale（縮放比例） 為1，這樣就保證了加載的時候，要獲取設備的寬度，同時要保持原始大小，方便媒體查詢 

3

、@media 媒體查詢

rr裡面還有許多參數，包括all（用於所有設備）、print（用於印表機和列印預覽）、speech（應用於螢幕閱讀器等發聲設備）。  使用and來並列顯示多種情況，min-width 和max-width 來定義在那種尺寸的螢幕上顯示，這就是響應式的靈魂。

上面的例子，就是媒體查詢螢幕，最小寬度為10rem 最大寬度我20rem 的設備寬度上來實現大括號內的樣式或者其他功能，這裡面的rem也可以換成px或者em之類的單位等。

 

優點：現在大部分的響應式佈局都是使用@media 來實現的，可以書寫大量的公共樣式，在需要適應屏幕的時候，在括號內加入相應的功能即可實現響應式佈局。

缺點：

可能需要對同一個類別書寫不同的樣式，程式碼比較繁複，難度也稍微困難。

  

在應用中使用哪一種方法來實現響應式？

沒有哪一種方法是完美的，推薦的是三種方法交替使用，在恰當的地方使用恰當的方法。

在佈局過程中，一般都是寬度的百分比與媒體查詢交替使用的，並且在加載網頁之前，加入meta標籤，定義一下viewport的內容，這樣更方便於移動端的響應。也兼顧了設備的兼容性。

 

而響應式的設計方案的一般做法就是根據目標用戶的訪問設備的主要類型做三種或四種佈局。每種佈局都有一個區間，比如說小螢幕的手機分解析度可以設定為[320,640]。然後分別設計每種佈局即可，一般來說，各個佈局主要是調整模組的排列佈局順序，內容調整越少越好（盡量減少使用者適應成本）。

 

響應式優點

與以往的彈性盒子相比，響應式佈局會更好的、更主動的根據用戶設備變化不同的效果，它比彈性盒子更靈活，可讀性更強。響應式的一套方案解決所有設備的自適應問題。

 

響應式缺點

研發難度高，對應的css檔案可能是多個，也可能是單一。

 

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

 以上就是深度解析響應式佈局的內容，更多相關內容請關注PHP中文網（www.php.cn）！