rem：是一個相對單位，相對根元素字體大小的單位，再直白點就是相對於html元素字體大小的單位。
優點：這樣在計算子元素有關的尺寸時，只要根據html元素字體大小計算就好。不再像使用em時，得來回的找父元素字體大小頻繁的計算，根本就離不開計算器。
首先看下圖：html的字體大小設置為font-size:62.5%原因：瀏覽器默認字體大小是16px，rem與px關系為：1rem = 10px，10/16=0.625=62.5%，為了子元素相關尺寸計算方便，這樣寫最合適不過了。只要將設計稿中量到的px尺寸除以10就得到了相應的rem尺寸，方便極了。當然，直接將html元素設置為10px，也是可以的。
但是為什么一般多是 html{font-size:62.5%;} 而不是 html{font-size:10px;}呢？
因為有些瀏覽器默認的不是16px，或者用戶修改了瀏覽器默認的字體大小（因瀏覽器分辨率大小，視力，習慣等因素）。如果我們將其設置為10px，一定會影響在這些瀏覽器上的效果，所以最好用絕大多數用戶默認的16作為基數 * 62.5% 得到我們需要的10px。
實際項目設置成 font-size: 62.5%可能會出現問題，因為chrome不支持小於12px的字體，計算小於12px的時候，會默認取12px去計算，導致chrome的em/rem計算不准確。
找了個參考圖，方便參考。如下：
然鵝，這里有個坑，在大部分現代瀏覽器都沒有問題，但是，谷歌font-size:62.5%剛好是10像素，而谷歌是不支持小於12像素的字體的，所以，谷歌無形當中將所有的rem全部變大了。這下麻煩了，所有的地方都錯位了。chrome在字體小於12px時都當12px 處理，也就是設置62.5%相當於設置成了75.0%。但是在除的時候又是除的10得到rem值，那么當然錯位。
針對這個現象，可以嘗試設置html字體為625%，即100px，body 修正為16px，這樣 0.1rem 就是 10px，而body的字體仍然是默認大小，不影響未設置大小的元素的默認字體的大小。
---------------------
作者：勁楓
來源：CSDN
原文：https://blog.csdn.net/TCF_JingFeng/article/details/80813799
版權聲明：本文為博主原創文章，轉載請附上博文鏈接！