REM佈局原理

1 em、rem、meta標籤的基本概念

em 是一個佈局的長度單位，當前對象內文本的字體大小的相對單位，也就是說相對於當前元素的font-size。

rem 是（根）字體大小相對單位，也就是說跟當前元素的font-size沒有關係，而是跟整個body的font-size有關係。

物理像素是硬件的一個實際像素；而邏輯像素是咱們在網頁設計中使用的像素。它跟物理像素的關係是有一個設備像素比的關係，好比說設備像素比是2，那麼就說明一個邏輯像素對應着4個物理像素，它們是一個平方的關係。

meta標籤，咱們能夠指定瀏覽器的適口，適口就是能夠看見的區域。而後它有三個須要瞭解的概念，分別是：

layout viewport 瀏覽器的默認適口，也就是clientWidth，在PC端若是把瀏覽器最大化的時候咱們能夠發現clientWidth與innerWidth是相同的，可是在移動端是不同的；它是移動設備默認的viewport。

visual viewport 瀏覽器的可視區域大小，在手機瀏覽器中的innerWidth是小於clientWidth，在PC端最大化的時候二者是同樣的，可是在手機端最大化是二者是不同的。

ideal viewport 是一個理想化的適口viewport。這個概念更多的取決於具體的需求，好比說在2倍的環境下開發和當前的尺寸下開發那麼它的ideal viewport是不同的。這裏面有一個概念叫initial-scale 縮放比例，它是layout viewport相對於ideal viewport 的縮放比例。更準確的說ideal viewport是由layout viewport和initial-scale 縮放比例決定的。

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

上面代碼的意思是：name是用來指定適口的，content 具體內容，第一個width寬度等於設備寬度，initial-scale縮放比例是1，最大的縮放比例也是1，而後不容許用戶縮放。裏面的width和initial-scale都是指定ideal viewport，若是二者都存在，那麼取二者之間的較大值。

2 移動端的適配設備屏幕

最終目標是設計稿可以等比縮放在設備上。既然咱們要設計稿等比縮放在設備上，那麼全部的設備都要有一個統一的適口，對咱們而言統一的適口就叫作ideal viewport 理想的適口，咱們獲得這個理想的適口就須要動態的去處理Mate標籤：

• 像素比 - 1 - scale=1
• 像素比 - 2 - scale=2
• 像素比 - 3 - scale=3
• 獲取設備的像素比

首先獲取像素比，根據設備的像素比來指定不一樣的initial-scale，像素比多是1,2,3，那麼咱們在設置的時候就用1除以這個像素比。下面是一個動態處理Mate標籤scale的代碼：

var devicePixelRatio = window.devicePixelRatio;
var scale = 1 / devicePixelRatio;

var metaElement = document.createElement('meta');
metaElement.setAttribute('name', 'viewport'); metaElement.setAttribute(
    'content',
    'initial-scale=' + scale + ',
     maximum-scale=' + scale + ',
     minimum-scale=' + scale + ',
     user-scalable=no'
);

document.documentElement.firstElementChild.appendChild(metaElement);

處理完理想的ideal viewport接下來就要處理根節點的尺寸（font-size取適口的十分之一）。由於咱們使用的rem佈局在不一樣的設備上要有不一樣的根節點來保證咱們獲得的比例是同樣的。

var rem = document.documentElement.clientWidth / 10
document.documentElement.style.fontSize = rem + 'px'

3 還原設計圖

移動端：

設計圖通常而言手機端的設計圖尺寸它都是640px 750px，爲何是這個尺寸呢？由於咱們知道iPhone是320可是設計圖給的是真實像素的寬度640。有不少個緣由，首先第一個是爲了兼容大多數設備的折中方案，640它向下向上，320均可以清晰；第二個是爲了不高清屏圖片的模糊，若是給的是一個320的設計圖放到640px的設備上確定就模糊了；還有一個緣由是1px的邊框問題，好比在iPhone上它的像素比是2，若是給的是一個320px的設計圖，它上面的1px的邊框實際上在咱們的設備顯示過程當中就會變成一個2px的邊框，由於它的像素比是2，因此爲了不這個問題設計圖尺寸用的是640px 750px。

設計圖的縮放是高清屏下面的0.5倍縮放，普通屏不縮放。

PC端：

縮放比例都是一比一；font-size設計圖尺寸通常來說都是1920px * 1080px。

4 vm / vh 與 rem

rem

• 須要動態設置根尺寸font-size
• 用戶沒法設置更大字體（由於有一個動態指定字體的過程，因此用戶很難再去處理這個字體）

vw / vh

• 自動縮放
• 不影響字體
• 兼容性差

在移動端佈局的時候，爲了高清的還原設計圖咱們須要根據設備的像素比把咱們實際的ideal viewport作一個縮放，縮放的目的就是爲了保證設計圖的尺寸跟實際的物理像素是對應的。