美文网首页
rem移动端适配

rem移动端适配

作者: Micro同学 | 来源:发表于2019-06-05 15:03 被阅读0次

    引入如下js内容(按照750px设计稿宽度配置):

    <script type="text/javascript">
        (function (doc, win) {
          let docEl = doc.documentElement
          let resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize'
          let recalc = function () {
            let clientWidth = docEl.clientWidth
            if (!clientWidth) return
            if (clientWidth >= 750) {
              docEl.style.fontSize = '100px'
            } else {
              docEl.style.fontSize = 100 * (clientWidth / 750) + 'px'
            }
          }
          if (!doc.addEventListener) return
          win.addEventListener(resizeEvt, recalc, false)
          recalc()
          doc.addEventListener('DOMContentLoaded', recalc, false)
        })(document, window)
      </script>
    

    相关文章

      网友评论

          本文标题:rem移动端适配

          本文链接:https://www.haomeiwen.com/subject/psivoqtx.html