rem移动端适配方案
Posted shangyueyue
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了rem移动端适配方案相关的知识，希望对你有一定的参考价值。
一、 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; }
参考文档：
简单粗暴的移动端适配方案 - REM
以上是关于rem移动端适配方案的主要内容，如果未能解决你的问题，请参考以下文章