移動端適配，自適應布局的各種方案與最佳實踐

畫素分為css畫素和物理畫素（裝置畫素）

在css和js中寫的px單位，都屬於css畫素；

物理畫素只和裝置或者說硬體有關，同樣尺寸的螢幕，裝置的密度越高，物理畫素越多。

細節可參考：你真的了解css畫素嘛？

廣義的視口，是指瀏覽器顯示內容的螢幕區域，狹義的視口包括了布局視口、視覺視口和理想視口

在移動端中，理想視口或者說解析度跟物理畫素之間有什麼關係呢？

dpr（device pixel ratio）裝置畫素比：1 dpr = 物理畫素／解析度

不縮放的情況下，1 css畫素 = 物理畫素／解析度 = 1 dpr

在移動端的布局中，我們可以通過viewport元標籤來控制布局

細節可參考：viewport詳解

在pc端的布局視口通常情況下為980px，移動端以iphone6為例，解析度為375 * 667，也就是說布局視口在理想的情況下為375px。

pc端： 1 css畫素 = 物理畫素／解析度 = 750 ／ 980 =0.76 px
iphone6：1 css畫素 = 物理畫素 ／解析度 = 750 ／ 375 = 2 px

也就是1個css畫素可以表示的物理畫素是不同的，因此如果在css中僅僅通過px作為長度和寬度的單位，造成的結果就是無法通過一套樣式，實現各端的自適應。

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

舉例：

@media screen and (
max-width
: 960px)
}@media screen and (
max-width
: 768px)
}@media screen and (
max-width
: 550px)
}@media screen and (
max-width
: 320px)
}

通過max-width設定樣式生效時的最大解析度，上述的**分別對解析度在0～320px，320px～550px，550px～768px以及768px～960px的螢幕設定了不同的背景顏色。

缺點：

這樣做會比較麻煩，只能在選取的幾個主流裝置尺寸下呈現完美適配。

比如當瀏覽器的寬度或者高度發生變化時，通過百分比單位，通過百分比單位可以使得瀏覽器中的元件的寬和高隨著瀏覽器的變化而變化，從而實現響應式的效果。

缺點：

計算困難，如果我們要定義乙個元素的寬度和高度，按照設計稿，必須換算成百分比單位。

各個屬性中如果使用百分比，相對父元素的屬性並不是唯一的。比如width和height相對于父元素的width和height，而margin、padding不管垂直還是水平方向都相對比父元素的寬度，border-radius則是相對於元素自身等等，造成我們使用百分比單位容易使布局問題變得複雜。

內嵌一段指令碼去動態計算根元素大小。

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

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

px變成rem單位的兩種方案：

webpack loader配置：px2rem-loader

webpack plugin配置： postcss-loader

缺點：

必須通過js來動態控制根元素font-size的大小。

也就是說css樣式和js**有一定的耦合性。且必須將改變font-size的**放在css樣式之前。

視口單位中的「視口」，桌面端指的是瀏覽器的可視區域；移動端指的就是viewport中的layout viewport。

根據設計稿的尺寸轉換為vw單位(sass函式編譯)

//iphone 6尺寸作為設計稿基準
$vm_base
: 375;
@function
vm($px)

使用vm()來寫其他css配置

根元素font-size利用視口單位實現，依賴於視口大小而自動縮放

給根元素大小設定vw。

限制根元素font-size的最大最小值，配合body加上最大最小寬度。

// rem 單位換算：定為 75px 只是方便運算，750px-75px、640-64px、1080px-108px，如此類推 $vm_fontsize : 75; // iphone 6尺寸的根元素大小基準值 @function rem($px) // 根元素大小使用 vw 單位 $vm_design : 750; html @media screen and ( min-width : 540px) } // body 也增加最大最小寬度限制，避免預設100%寬度的 block 元素跟隨 body 而過大過小 body

移動端適配，自適應布局的各種方案與最佳實踐

移動端自適應布局的適配

移動端自適應方案 rem布局

移動端自適應布局

移動端適配，自適應布局的各種方案與最佳實踐

移動端自適應布局的適配

移動端自適應方案 rem布局

移動端自適應布局

相關推薦