vw+rem移動端自適應佈局

本文同步發佈於個人我的博客上 - vw+rem移動端自適應佈局

不論是面試仍是工做過程當中，移動端的佈局都比較常見，而移動端適配方法也是多種多樣。通常來講，主要仍是從viewport、rem、百分比幾個點下手。

通常來講，開發過程當中，咱們但願可以直接按照設計圖來開發，無論設計圖是兩倍仍是三倍圖，可以直接寫設計圖尺寸而不須要換算，同時有高質的設計圖還原度，想一想都比較爽。

這裏介紹一種使用vw和rem來佈局的方案。

該方案思路主要是，設置視口寬度爲設備寬度，使用vw來動態設置根元素的font-szie，同時使用sass的css function來實現設計尺寸轉rem的功能，從而實現一套不須要js計算而自動設置根元素font-szie的rem佈局。

vw

不瞭解vw的同窗能夠了解一下vw。vw表示當前視口寬度的百分之一。

rem佈局過程當中依賴於根元素的font-size屬性，而若是設置一個固定的font-size，再使用rem來佈局，會致使小屏手機視覺上以爲網頁被放大，而大屏手機上則顯得網頁佈局稀疏。

因此我們須要根據收據的屏幕大小等比的設置font-size，從而實現大小屏手機視覺一致的效果。實現這個功能可使用js在頁面載入時，讀取屏幕寬度，再根據設計圖標準寬度作一些轉換。

而使用vw自然就是一個根據屏幕寬度來作計算的長度單位，完美實現以上js計算功能。同時在移動端，vw的兼容性還不錯，徹底能夠直接使用。

計算方法：

// 設計圖標準根元素字體 / 設計圖標準寬度 * 100
const vw = 16 / 750 * 100

例如，設計圖以6s爲標準，2倍尺寸，寬度750px，而你設置根元素字體大小爲16px，那麼計算出的vw就是2.13333vw，直接在css中設置：

html {
    font-size: 2.13333vw;
}

這個時候，咱們在標準寬度下根元素實際字體大小是16px，若是到5s手機上面，則根元素實際字體大小爲13.653px。根元素的字體大小變了，頁面中使用rem來設置的邊距、長度、字體大小都會發現改變，頁面看起來像是縮小了一點點，可是全部的佈局跟6s都是同樣的。

6s顯示效果：

5s顯示效果：

能夠看到效果是一致的，換行、截斷都顯示一致，視覺效果也是一致的。

橫屏顯示

咱們平常使用中，手機都是豎屏顯示的，可是也會有橫屏顯示的時候。若是橫屏顯示，那麼手機的寬度就變成了長度，長度就變成了寬度了，這個時候vw就顯示的不對了。看下圖，雖然顯示沒有亂，可是字變的很大了，複雜狀況下佈局估計也亂了。

還好有應對方法：vmin，這個屬性表示視口寬度中最小的那個，豎屏下是vw，橫屏下是vh。設置了vim以後顯示效果就不錯了。

自動轉換rem

設計圖的設計尺寸通常都是2倍或者3倍，若是此時我們本身轉換成一倍的再去根據根元素計算rem那也太累了。

好比2倍設計圖上面的56px，那麼我們須要：56 / 2 / 16，心態崩潰~~~

算是不可能本身算的，找插件唄，這個輪子早就被造好了，postcss-pxtorem就是專門來幹這個事情的，配置好設計尺寸，設計倍數，而後css裏面直接寫56px，插件會本身給你計算成 (56 / 2 / 16)px，是否是很棒。

加載配置一個插件也挺麻煩的，若是你恰好在sass之類的css預處理器，徹底可使用sass function來自動計算。

$rootSize: 16px!default;
$designWidth: 750px!default;
$designRatio: 2!default;

@function rem($px) {
    @return $px / $rootSize / $designRatio * 1rem;
}
@function rootVw() {
    @return $rootSize / $designWidth * $designRatio * 100vmin;
}

這樣就一次性計算好了根元素font-size，也可使用rem()來自動計算rem了。

html{
    font-size: rootVw();
}
body{
    padding: rem(15px);
}

這樣完成了一個簡單好用的移動端佈局了~~