手機端font-size:62.5%原理
原理： 是根據根節點html的預設字型大小font-size來計算的，以此進行rem的初始值設定。實現對不同螢幕寬度的適配。（100px/16px=6.25=625%, 100代表100px,這裡是以100px來換算的，即：1rem=100px。當然有些地方是10px/16px=62.5%，以10px來換算的，即1rem=10px。）
rem是css3中新增加的一個單位屬性，是相對長度單位。相對於根元素(即html元素)font-size計算值的倍數
具體解析：
在桌面瀏覽器上font-size的初始值是16px（即1rem = 16px）
<!-- rem的初始賦值 --> <html style=""> <head></head> <body> <div style="font-size: 1rem">此處的1rem即裝置的預設字型大小，桌面瀏覽器預設字型大小是16px</div> </body> </html>
當然可以在css上進行初始賦值，或者使用js進行動態的初始賦值
/*使用css進行rem的初始賦值*/
html{
font-size: 100px; /*此處的初始賦值表示1rem=100px*/
}rem的 62.5% 和 10px的區別
在桌面瀏覽器上 font-size 的預設值是16px;
可知 font-size: 62.5%; 即表示10px （通過計算 16 * 62.5% = 10 得到）
那麼 font-size: 62.5%; 和 font-size: 10px; 的區別在什麼地方呢？
比較好的解釋：
桌面瀏覽器預設頁面字型大小是16px，這種情況下設定成具體畫素大小或者對應的百分比，看起來的效果是一樣的；
但是其他型別的裝置的預設字型大小不一定是16px，
特別是高解析度的裝置，16px大小的字型在它們上面看起來會非常小，所以不能在body上設定具體畫素值，
設定成百分比，可以按照裝置的基準字型大小給編寫的網頁設定好最適合使用者瀏覽的字型大小。
正確的rem使用方法
使用 font-size: 62.5%; 更好
/*rem的初始賦值*/ html{ font-size: 62.5%; /*此處的初始賦值表示1rem=10px*/ }
然而坑無處不在。。。
新的問題： 我們開發常用的chrome瀏覽器，支援的最小字型大小是12px，
/*rem在不同瀏覽器下的結果*/
html{
font-size:62.5%;
}
header{
height:8rem; /*在其他瀏覽器表示80px，在chrome上表示96px*/
} 解決辦法：
font-size:625%;1rem = 100px， 以此為單位進行換算，可以避免以上問題的出現
專案中：
如果你們手機是320px的，那麼截圖出來尺寸是640px;
dpr:畫素比
dpr=物理畫素（750px） / 邏輯畫素(375px，我們去佈局寫的尺寸) =2
邏輯畫素 = 物理畫素 / dpr;
dpr的取值：如果的設計圖是640px ,750px 的時候 dpr= 2
如果你的設計圖為1080的時候，那麼dpr=3；
(1)如果設計圖為750px或者640px drp = 2 那麼邏輯畫素為：375px或者320px
下面佈局的尺寸：90px（量出來的尺寸,也就是設計圖的尺寸） / dpr(2) = 45px(邏輯畫素)；
我們rem寫多少：45/100= 0.45rem;