一、 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; }
参考文档：