使用rem来写移动端h5

2019-09-30  本文已影响0人  huanghaodong

使用rem后,浏览器会根据html元素的font-size将rem转为px。所以如何确定html的font-size是关键。
这里推荐一段js代码:

!(function (n) {
      var e = n.document,
        t = e.documentElement,
        i = 750, //设计图宽度
        d = i / 100,//自己定义的px与rem比例,如设计图宽750px,某元素宽50px,这里比例为100则写成0.5rem
        o = 'orientationchange' in n ? 'orientationchange' : 'resize',
        a = function () {
          var n = t.clientWidth || 320
          t.style.fontSize = n / d + 'px'
        }
      e.addEventListener &&
        (n.addEventListener(o, a, !1),
          e.addEventListener('DOMContentLoaded', a, !1))
    })(window)

换算原理:

document.documentElement.clientWidth * 50/750 = 50/100 (rem) * htmlFontSize
上一篇 下一篇

猜你喜欢

热点阅读