rem佈局解析

移動端的屏幕大小各異,尤爲是安卓機,千奇百怪,各類尺寸的機型都有,並且有1倍屏,2倍屏，3倍屏之分，做爲精益求精的前端，咱們但願找到一種完美適配各類機型的方案。rem是如今主流的移動端自適應佈局方案，本文主要介紹了rem佈局的原理和通用方案

原理

首先說一下，咱們想要達到的自適應效果是什麼。很簡單：元素、字體大小能隨着屏幕大小（通常相對於寬度來講）變化而變化，在大一點的屏幕上，尺寸大一些；在小一點的屏幕上，尺寸小一些；尺寸的大小和屏幕大小成正比。

最簡單最直接的方案就是直接用百分比設置元素的尺寸。咱們用百分比設置元素大小能夠實現元素尺寸的自適應，可是沒法實現字體大小的自適應，並且尺寸轉化爲百分比計算很麻煩，還有就是元素尺寸的高很難相對屏幕寬度設置百分比。百分比適用於某種具體場景，不是通用解決方案。

其實咱們須要的是一個和屏幕寬度正相關的單位，並且這個單位要和px很容易互相轉化。這樣咱們就能夠使用這種單位進行元素尺寸和字體大小的設置。那麼css中存在這種單位嗎？答案是：不存在的。。。不過不要灰心，咱們能夠藉助rem來實現這種咱們須要的單位。

rem是一個相對單位，1rem等於html元素上字體設置的大小。咱們只要設置html上font-size的大小，就能夠改變rem所表明的大小。這樣咱們就有了一個可控的統一參考系。咱們如今有兩個目標：

• rem單位所表明的尺寸大小和屏幕寬度成正比，也就是設置html元素的font-size和屏幕寬度成正比
• rem單位和px單位很容易進行換算，方便咱們按照標註稿寫css

這裏有一個前提，不管是設置html的font-size和屏幕寬度成正比，仍是換算單位，咱們都是以咱們的標註稿爲參考的。移動端的標註稿通常是640px(iphone5)或者750px(iphone6/7/8),如今750px用的比較多一些，咱們假設標註稿是750px的。這裏的750px是指設備的實際尺寸，也是UI標註稿的實際尺寸。而咱們編碼寫的px是指css尺寸，是設備無關的尺寸，css尺寸和屏幕實際尺寸不是1比1的映射關係，而是取決於屏幕的像素密度。好比iphoneX是3倍屏，iphone8是2倍屏，可是兩個的屏幕css尺寸都是375px。而實際的設備尺寸，iphonex是1125px，iphone8是750px，咱們編碼過程當中只須要設置css尺寸，設備會自動幫咱們映射實際的尺寸。咱們按照標註稿寫完頁面以後，頁面應該是能夠在其餘全部尺寸設備上正常自適應地顯示的。

rem單位所表明的尺寸大小和屏幕寬度成正比

首先，設置rem單位所表明的尺寸大小和屏幕寬度成正比，有3中方案,先沒必要糾結其中的數值：

• 媒體查詢, 設定每種屏幕對應的font-size

@media screen and (min-width:240px) {
    html, body, button, input, select, textarea {
        font-size:9px;
    }
}
@media screen and (min-width:320px) {
	html, body, button, input, select, textarea {
		font-size:12px;
	}
}
// 紅米Note2
@media screen and (min-width:360px) {
	html, body, button, input, select, textarea {
		font-size:13.5px;
	}
}
@media screen and (min-width:375px) {
	html, body, button, input, select, textarea {
		font-size:14.0625px;
	}
}
複製代碼

• js設置html的font-size大小

document.documentElement.style.fontSize = document.documentElement.clientWidth / 750 + 'px';

複製代碼

• 使用vw設置，vw也是一個相對單位，100vw等於屏幕寬度

html{
    font-size: 10vw;
}
複製代碼

這3種方式，均可以設置html的font-size和屏幕寬度成正比。這3種的單位是css尺寸,不管第一種方法的min-width仍是第二種document.documentElement.clientWidth都是相對於設備的css尺寸而言，在iphonex和iphone8獲得的結果都是375px。

第一種，須要設置須要每種屏幕都設置對應的font-size,這些font-size都是根據比例算出來的，比較繁瑣，並且還有可能漏掉某些屏幕尺寸，不推薦。第二種用js設置，比較方便，如今大部分網站採用這種方式。第三種經過css的vw來設置，也很方便，並且不用寫css，可是兼容性還不是特別好。綜合推薦使用第二種。

單位換算

如今咱們要使用rem設置元素尺寸和字體大小。有兩種思路：

• 設置特殊的html的font-size,使rem和標註稿上px容易換算，好比把咱們的html的font-size設置成1px，這樣1rem就等於1px，由於咱們標註稿750px，是基於二倍屏的，1個css單位等於2個實際單位，因此咱們的font-size設置爲0.5px，這樣咱們設置尺寸時，rem和標註稿的px，就是1比1映射的。固然這裏全部的大小都是相對於標註稿尺寸來講的，若是是其餘屏幕的尺寸，html的font-size確定要相應的變大或者變小，經過第二種js方法能夠實現：

document.documentElement.style.fontSize = document.documentElement.clientWidth / 750 + 'px';

複製代碼

• 經過css預編譯或者webpack插件，實時計算 好比，咱們將html根元素設置爲16px，標註稿上有一個div元素寬度爲100px,咱們在scss中能夠這樣寫

$rem: 32rem;

div{
	width: 100/$rem;
}
複製代碼

webpack的插件也是基於這樣的計算原理，好比px2rem

module.exports = {
  // ...
  module: {
    rules: [{
      test: /\.css$/,
      use: [{
        loader: 'style-loader'
      }, {
        loader: 'css-loader'
      }, {
        loader: 'px2rem-loader',
        // options here
        options: {
          remUnit: 32,
          remPrecision: 8
        }
      }]
    }]
  }
}
複製代碼