點擊上方藍字關注「小鄭搞碼事」，每天都能學到知識，搞懂一個問題！

在上篇H5-（px、em、rem）那些必須搞懂的問題，我詳細闡述了三個單位（px、em、rem）的區別及使用規則，大概是這樣的：

01、px：像素是相對於顯示器屏幕解析度而言的相對長度單位。PC端我們可以認為1px就是1物理像素（屏幕100%時候），但是，由於在移動端，因為手機解析度的各類頗多，不可能一個個去適配，這時px就顯得非常無力了，所以我們就考慮使用em和rem。

02、em：從概念上來看，這個單位是繼承父級的，假設html元素上我們設置了字體大小為16px。一級子元素p的字體大小我們設置了1em，也就是1*16=16px。在往下一級span元素，我們設置它的字體大小2em，這個時候的基準大小相對它的元素。即（1em=16px），也就是2*16=32px。以上就是繼承了父級的值。這個嵌套一旦多了，就無助了，所以rem出現了。

03、rem：CSS3新增的一個相對單位（root em，相對根元素），只會相對html元素的值，不會受父級的影響。相對於em單位的好處是：單位計算方便點。

以上就是上一篇我們寫的內容，這一篇我們來寫如何正確在項目（主要是移動H5頁面適配）中應用rem。

一、需要知道的一點：

不是所有的瀏覽器都默認字體大小16px，也千萬不要認為是這樣，然後按這個前提去開發（況且這個值也是可以自己設置的）。

二、怎麼正確應用：

基於上在這一點的不確定性，我們給出解決辦法。

因為rem是相對html的，那麼只要將html選擇器設置一個絕對大小的值，比如在html選擇器設置font-size：20px，那麼1rem=20px（這裡由於chrome的最小字體是12px，雖然當1rem=10px時，10的倍數容易計算，但這個數據是無效的，因此向上取大整數，所以選擇20px比較恰當）。要兼容手機各個分別率，使用媒體查詢media可以設置不同的大小，這樣在常規的設備中都可以精準到每一個像素。

下面給一個640px屏幕和html的font-size：20px的適配代碼：（各種尺寸屏幕根據比例計算得到html的font-size）

在開發H5的時候，可以用px布局，然後通過一些線上或線下工具將其轉換成rem單位值（以適配代碼為基準）。

三、寫在最後的總結：

現在我們知道了怎麼在一個H5開發中正確使用rem單位來做適配。那，是不是說rem就是最好移動適配方案了呢？其實rem也有缺陷，當然也不是最好的移動頁面適配解決方案，詳情聽我下回來寫。

夜色已晚，以上如有寫的不對的地方，歡迎留言指正。

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！