如何實現響應式布局

響應式與自適應的區別：

響應式布局：不管使用者使用的是什麼裝置都是在伺服器把資料推送到瀏覽器後，指令碼或css自行偵測螢幕大小後執行對應的樣式表內容，並且一直通過本地指令碼在監聽螢幕大小的變化，隨時做出樣式響應的變化，所以是主動的。同一頁面在不同大小裝置可能呈現不一樣的頁面效果

px：相對於顯示器螢幕解析度；

em：基於父級元素的字型大小；

rem：基於html的字型大小

rem單位都是相對於根元素html的font-size來決定大小的，根元素的font-size相當於提供了乙個基準，當頁面的size發生變化時，只需要改變font-size的值，那麼以rem為固定單位的元素的大小也會發生響應的變化。

因此，如果通過rem來實現響應式的布局，只需要根據檢視容器的大小，動態的改變font-size即可。

function
refreshrem() 
win.addeventlistener('resize', refreshrem);

使用@media**查詢可以針對不同的**型別定義不同的樣式，特別是響應式頁面，可以針對不同螢幕的大小，編寫多套樣式，從而達到自適應的效果。

設定步驟如下：

大多數移動瀏覽器將html頁面放大為寬的檢視（viewport）以符合螢幕解析度。你可以使用檢視的meta標籤來進行重置。下面的檢視標籤告訴瀏覽器，使用裝置的寬度作為檢視寬度並禁止初始的縮放。在標籤裡加入這個meta標籤。

<
meta 
name
="viewport"
content
="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
>

（user-scalable = no 屬性能夠解決 ipad 切換橫屏之後觸控才能回到具體尺寸的問題。）·

media queries 是響應式設計的核心。

它根據條件告訴瀏覽器如何為指定檢視寬度渲染頁面。假如乙個終端的解析度小於 980px，那麼可以這樣寫：

@media screen and (max-width: 980px) #content #footer }

這裡的樣式就會覆蓋上面已經定義好的樣式。

4. 設定多種試圖寬度

如果需要設定相容 ipad 和 iphone 的檢視，那麼可以這樣設定：

/*
* ipad *
*/@media only screen and (min-width: 768px) and (max-width: 1024px) {}
/** iphone *
*/@media only screen and (min-width: 320px) and (max-width: 767px) {}

css3中引入了乙個新的單位vw/vh，與檢視視窗有關。vw表示相對於檢視視窗的寬度，vh表示相對於檢視視窗高度，除了vw和vh外，還有vmin和vmax兩個相關的單位。

各個單位具體的含義如下：

單位含義

vw相對於視窗的寬度，視窗寬度是100vw

vh相對於視窗的高度，視窗高度是100vh

vmin

vw和vh中的較小值

vmax

vw和vh中的較大值

這與%十分相似。vw和%的區別為：

單位含義

%大部分相對於祖先元素，也有相對於自身的情況比如（border-radius、translate等)

vw/vh

相對於視窗的尺寸

從對比中我們可以發現，vw單位與百分比類似，單確有區別，前面我們介紹了百分比單位的換算困難，這裡的vw更像"理想的百分比單位"。任意層級元素，在使用vw單位的情況下，1vw都等於檢視寬度的百分之一。

常用解決方案對比

**查詢

彈性盒子模型

如何實現響應式布局

如何實現響應式布局

實現響應式布局

響應式布局 響應式布局技巧

相關推薦

響應式布局響應式布局技巧