js动态设置根元素的rem方案

方案需求:

rem 单位在做移动端的h5开发的时候是最经常使用的单位。为解决自适应的问题,我们需要动态的给文档的根节点添加font-size 值。

使用mediaquery 可以解决这个问题,但是每一个文件都引用一大串的font-size 值很繁琐,而且值也不能达到连续的效果。

就使用js动态计算给文档的fopnt-size 动态赋值解决问题。

设计稿以750为准。其中测试的设计稿中标注此div的width:750px;height:200px;

方案一:

<script type="text/javascript">
  window.addEventListener(('orientationchange' in window ? 'orientationchange' : 'resize'), (function() {
    function c() {
      var d = document.documentElement;
      var cw = d.clientWidth || 750;
      d.style.fontSize = (20 * (cw / 375)) > 40 ? 40 + 'px' : (20 * (cw / 375)) + 'px';
    }
    c();
    return c;
  })(), false);
</script>
<style type="text/css">
  html{font-size:10px}
  *{margin:0;}
</style>
<div style="width:18.75rem;height:5rem;background:#f00;color:#fff;text-align:center;">
    此时在iPhone6上测试,width:375px,也即width:100%。
  此时 1rem = 40px;将设计稿标注的宽高除以40即可得到rem的值。 </div>

方案二:

<script type="text/javascript">
  !(function(doc, win) {
    var docEle = doc.documentElement, //获取html元素
      event = "onorientationchange" in window ? "orientationchange" : "resize", //判断是屏幕旋转还是resize;
      fn = function() {
        var width = docEle.clientWidth;
        width && (docEle.style.fontSize = 10 * (width / 375) + "px"); //设置html的fontSize,随着event的改变而改变。
      };

    win.addEventListener(event, fn, false);
    doc.addEventListener("DOMContentLoaded", fn, false);

  }(document, window));
</script>
<style type="text/css"> html { font-size: 10px; } *{ margin: 0; } </style>
<div style="width:37.5rem;height:10rem;background:#f00;color:#fff;text-align:center;">
    此时 1rem = 20px;将设计稿标注的宽高除以20即可得到rem的值。
</div>

write by tuantuan

 

转载于:https://www.cnblogs.com/widgetbox/p/9549446.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值