根据屏幕大小以及设计稿进行rem适配(进行误差修正处理)

  Tips:PC,IOS对rem的计算比较准确,Android对rem的计算标准却是参差不齐,误差修正操作就是为了应对这一情况。

      /**
       * 根据屏幕大小以及设计稿进行rem适配
       * @param {window} n - window
       * @param {number} design - 设计稿宽度
       * @param {number} scale - rem换算比例 exp: scale=10,则1rem=10px
       */
      !((n, design, scale) => {
        const e = n.document,
            t = e.documentElement,
            d = design / scale,
            o = "orientationchange" in n ? "orientationchange" : "resize",
            a = function () {
              let n = t.clientWidth || i;
              n > design * 2 && (n = design * 2);
              n < design / 2 && (n = design / 2);
              t.style.fontSize = n / d + "px";
              const div = document.createElement("div");
              div.style.width = "1.4rem";
              div.style.height = "0";
              document.body.appendChild(div);
              const ideal = 1.4 * n / d;
              const rmd = Number.parseFloat(getComputedStyle(div, null).width) / ideal;
              console.log(rmd, "误差比");
              if (rmd > 1.1 || rmd < 0.9) {
                t.style.fontSize = (n / d) / rmd + "px";
                console.log("修正执行");
              }
              document.body.removeChild(div);
            };
        e.addEventListener &&
        (n.addEventListener(o, a, !1), e.addEventListener("DOMContentLoaded", a, !1));
      })(window, 1920, 10);

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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值