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移动端适配方案

上一篇:spring,cxf,restful发布webservice传递List,Map,List


下一篇:python学习第六天 - 列表(数组)