rem移動端適配方案
阿新 • • 發佈：2018-11-26
一、 rem vs em
| 單位 | 定義 | 特點 |
|---|---|---|
| rem | font size of the root element | 以根元素字型大小為基準 |
| em | font size of the element | 以父元素字型大小為基準 |
二、js計算
為了避免造成因為動態設定<html>元素的font-size而造成頁面抖動，一般這部分程式碼我們放在header底部去載入，並內聯到html文件裡面。
<script> const oHtml= document.getElementsByTagName('html')[0]; const width = oHtml.clientWidth; oHtml.style.fontSize = 14 * (width / 375) + "px"; </script>
三、媒體查詢
@media screen and (min-width: 375px){ html { font-size: 14.0625px; } } @media screen and (min-width: 360px){ html { font-size: 13.5px; } } @media screen and (min-width: 320px){ html { font-size: 12px; } } html { font-size: 16px; }
參考文件：