rem动态屏幕适配解决方案

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/weixin_38704338/article/details/79853145

(function (doc, win) {
  var docEl = doc.documentElement
  var resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize'
  var recalc = function () {
    var clientWidth = docEl.clientWidth
    if (!clientWidth) return
    docEl.style.fontSize = 100*clientWidth/750 + 'px'
  }
  if (!doc.addEventListener) return
  win.addEventListener(resizeEvt, recalc, false)
  doc.addEventListener('DOMContentLoaded', recalc, false)
})(document, window)

这里的750px就是设计稿的宽度。在此设计稿下换算如下。

    如果设计稿中元素为20px，则转换为rem 为0.2rem

元素会根据屏幕的尺寸放大或者缩小

原理：

    浏览器默认的1rem =16px, 手机上则根据dpi的不同，这个值有所改变

    1rem有多少个px这个是受到最外层元素的font-size影响的。

    设置html的fontsize值，设置好后，内部元素的1rem值会被这个值改变。

   1. font-size="设备宽度/设计稿宽度" 将这个值作为1rem的px个数，像素不能太小，就x100.

   2.  那么设计稿中元素为25px值时候，在设备上就是25rem,然后在除以100，就是0.25rem