PC端动态修改rem 移动端适配问题

rem = body.font-size  /   html.font-size

var clientWidth = document.documentElement.clientWidth || document.body.clientWidth;

    //计算比例

    var per = clientWidth / 375;

    document.documentElement.style.fontSize = per * 100 + "px";

    window.onresize = function() {

        var clientWidth = document.documentElement.clientWidth || document.body.clientWidth;

        //计算比例

        var per = clientWidth / 375;

        document.documentElement.style.fontSize = per * 100 + "px";

    }



给   

目的是:

body给font-size,html也给font-size建议给100px,这样的话转换的时候就会容易计算。

rem  =    body.font-size   /    html.font-size  

然后在js中添加函数,window.onload  和window.onresize 函数。即在页面加载完成和页面宽度发生变化的时候执行。

具体方法如下。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 了解真实的『REM』手机屏幕适配rem 作为一个低调的长度单位,由于手机端网页的兴起,在屏幕适配中得到重用。 使用...
    张宪宇阅读 2,288评论 0 5
  • "use strict";function _classCallCheck(e,t){if(!(e instanc...
    久些阅读 2,053评论 0 2
  • 以下是常用的代码收集,学习用。转自豪情博客园 1. PC - js 返回指定范围的随机数(m-n之间)的公式 re...
    自由加咖啡阅读 1,026评论 0 1
  • 1. tab列表折叠效果 html: 能源系统事业部 岗位名称: 工作地点 岗位名...
    lilyping阅读 1,899评论 0 1
  • 这是一个写作恐惧症患者的自我成长之路。 我是很害怕写作的,觉得自己很没有逻辑,也害怕表述。但同时我又是一个比较有韧...
    小满站阅读 130评论 0 0