rem移动端适配方案

Posted 2021-01-22 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移动端适配方案的主要内容，如果未能解决你的问题，请参考以下文章