码迷,mamicode.com
首页 > 移动开发 > 详细

rem移动端适配方案

时间:2018-11-26 13:38:50      阅读:206      评论:0      收藏:0      [点我收藏+]

标签:body   查询   pre   class   get   lan   col   页面   参考   

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

标签:body   查询   pre   class   get   lan   col   页面   参考   

原文地址:https://www.cnblogs.com/shangyueyue/p/10019387.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!