首先我們要了解一下什麼是rem

[ rem (font size of the root element) 是相對於根元素的字型大小單位]，也就是說，基準與html元素的字型大小。

比如，根元素html的 font-size: 12px；非根元素設定widt: 2rem；則換成px就表示24px。

rem方案的原理其實就是，將每一個不同的螢幕劃分成相同的份數，讓同一個元素在不同的螢幕上佔據相同比例的空間。1rem等於此頁面html的font-size，rem可以理解為每份是多少px，比如說，我們的設計稿寬度為750px，我們規定將頁面劃分成10份，那麼rem=75px，如果有一個div寬度為75px，就剛好為1rem。即，將750px寬的螢幕劃分為10份，這個div寬度佔一份。那麼只需要讓此div在不同寬度的螢幕下寬度都佔一份，就可以。

需要注意的是，不一定要將螢幕劃分成10份。如果你願意，你可以劃分成50份、100份都可以，最終的結果都是一樣的

分別在不同解析度下我將螢幕分成了30份，rem會調整尺寸大小

當然，如果都要這麼計算，那太麻煩了。所以，我們有了less編譯和外掛。（什麼？你問less是什麼？那你還是先不看這篇的好）

在移動端適配時，還有重要的一點，就是視口。

移動端裝置螢幕尺寸非常多，碎片化嚴重。尤其是Android，你會聽到很多種解析度：480×800, 480×854, 540×960, 720×1280, 1080×1920，而且還有傳說中的2K屏、4K，這就需要大家普及下 ，什麼是邏輯解析度和物理解析度

* 物理解析度是硬體所支援的，邏輯解析度是軟體可以達到的。*

物理尺寸是指螢幕的實際大小。大的螢幕同時必須要配備高解析度，也就是在這個尺寸下可以顯示多少個畫素，顯示的畫素越多，可以表現的餘地自然越大。

解析度就是螢幕上橫、縱的總象素點數。

如果我們設計的時候用單位px，可以說是物理解析度尺寸。

如果我們設計的時候用單位pt，可以說是邏輯解析度尺寸。

拿iPhone6舉例，物理畫素是750 * 1334，而他的邏輯解析度就是375 * 667。如果UI拿著pt的設計稿，就需要我們對各個元素*2的操作。

不過要真想完美適配移動端，我們還需要使用 @media 查詢，針對不同的媒體型別定義不同的樣式。

@media 可以針對不同的螢幕尺寸設定不同的樣式，特別是如果你需要設定設計響應式的頁。

 1 /* iPhone6/7/8/X */
 2 @media screen and (min-width: 375px) {
 3   html {
 4     font-size: 15px;
 5   }
 6 }
 7 　　　　　　　　　　　　　　　　
 8 /* iPhone6p/7p/8p */
 9 @media screen and (min-width: 414px) {
10   html {
11     font-size: 16.56px;
12   }
13 }

這裡是設定html標籤的font-size，頁面元素使用rem單位時，是相對於這個html標籤的font-size的大小為基礎的。