关于javascript:rem-适配

// 基准大小const baseSize = 50export function getClientW() {    let htmlWidth = document.documentElement.clientWidth || document.body.clientWidth;    if (htmlWidth > 768) {        htmlWidth = 768    }    if (htmlWidth < 320) {        htmlWidth = 320    }    // console.log(htmlWidth);    return htmlWidth}//计算根节点 字体大小  自适应  remyfunction setRem(normalWidth = 375) {    const size = getClientW() / normalWidth * baseSize    document.body.style.fontSize = size + 'px'    let htmlDom = document.getElementsByTagName('html')[0]    htmlDom.style.fontSize = size + 'px'    return size}// 初始化setRem()// 扭转窗口大小时从新设置 remwindow.onresize = function () {    setRem()};//Android微信中，借助WeixinJSBridge对象来阻止字体大小调整(function () {    if (typeof WeixinJSBridge == "object" && typeof WeixinJSBridge.invoke == "function") {        handleFontSize();    } else {        if (document.addEventListener) {            document.addEventListener("WeixinJSBridgeReady", handleFontSize, false);        } else if (document.attachEvent) {            //IE浏览器，非W3C标准            document.attachEvent("onWeixinJSBridgeReady", handleFontSize);        }    }    function handleFontSize() {        // 设置网页字体为默认大小        WeixinJSBridge.invoke('setFontSizeCallback', {            'fontSize': 0        });        // 重写设置网页字体大小的事件        WeixinJSBridge.on('menu:setfont', function () {            WeixinJSBridge.invoke('setFontSizeCallback', {                'fontSize': 0            });        });    }})();

(function(win, lib) {  var doc = win.document;  var docEl = doc.documentElement;  var metaEl = doc.querySelector('meta[name="viewport"]');  var flexibleEl = doc.querySelector('meta[name="flexible"]');  var dpr = 0;  var scale = 0;  var tid;  var flexible = lib.flexible || (lib.flexible = {});  if (metaEl) {    console.warn("将依据已有的meta标签来设置缩放比例");    var match = metaEl      .getAttribute("content")      // eslint-disable-next-line no-useless-escape      .match(/initial\-scale=([\d\.]+)/);    if (match) {      scale = parseFloat(match[1]);      dpr = parseInt(1 / scale);    }  } else if (flexibleEl) {    var content = flexibleEl.getAttribute("content");    if (content) {      // eslint-disable-next-line no-useless-escape      var initialDpr = content.match(/initial\-dpr=([\d\.]+)/);      // eslint-disable-next-line no-useless-escape      var maximumDpr = content.match(/maximum\-dpr=([\d\.]+)/);      if (initialDpr) {        dpr = parseFloat(initialDpr[1]);        scale = parseFloat((1 / dpr).toFixed(2));      }      if (maximumDpr) {        dpr = parseFloat(maximumDpr[1]);        scale = parseFloat((1 / dpr).toFixed(2));      }    }  }  if (!dpr && !scale) {    // eslint-disable-next-line no-unused-vars    var isAndroid = win.navigator.appVersion.match(/android/gi);    var isIPhone = win.navigator.appVersion.match(/iphone/gi);    var devicePixelRatio = win.devicePixelRatio;    if (isIPhone) {      // iOS下，对于2和3的屏，用2倍的计划，其余的用1倍计划      if (devicePixelRatio >= 3 && (!dpr || dpr >= 3)) {        dpr = 3;      } else if (devicePixelRatio >= 2 && (!dpr || dpr >= 2)) {        dpr = 2;      } else {        dpr = 1;      }    } else {      // 其余设施下，仍旧应用1倍的计划      dpr = 1;    }    scale = 1 / dpr;  }  docEl.setAttribute("data-dpr", dpr);  if (!metaEl) {    metaEl = doc.createElement("meta");    metaEl.setAttribute("name", "viewport");    metaEl.setAttribute(      "content",      "initial-scale=" +        scale +        ", maximum-scale=" +        scale +        ", minimum-scale=" +        scale +        ", user-scalable=no"    );    if (docEl.firstElementChild) {      docEl.firstElementChild.appendChild(metaEl);    } else {      var wrap = doc.createElement("div");      wrap.appendChild(metaEl);      doc.write(wrap.innerHTML);    }  }  // function refreshRem() {  //   var width = docEl.getBoundingClientRect().width;  //   // 最小1366px，最大适配2560px  //   if (width / dpr < 1366) {  //     width = 1366 * dpr;  //   } else if (width / dpr > 2560) {  //     width = 2560 * dpr;  //   }  //   // 设置成24等份，设计稿时1920px的，这样1rem就是80px  //   var rem = width / 24;  //   docEl.style.fontSize = rem + "px";  //   flexible.rem = win.rem = rem;  // }  function refreshRem() {    var baseSize = 100;    let basePc = baseSize / 1920; // 示意1920的设计图,应用100PX的默认值    let vW = window.innerWidth; // 以后窗口的宽度    let vH = window.innerHeight; // 以后窗口的高度    // 非正常屏幕下的尺寸换算    let dueH = vW * 1080 / 1920    if (vH < dueH) { // 以后屏幕高度小于应有的屏幕高度，就须要依据以后屏幕高度从新计算屏幕宽度      vW = vH * 1920 /1080    }    let rem = vW * basePc; // 以默认比例值乘以以后窗口宽度,失去该宽度下的相应font-size值    document.documentElement.style.fontSize =  rem + "px";    flexible.rem = win.rem = rem;  }  win.addEventListener(    "resize",    function() {      clearTimeout(tid);      tid = setTimeout(refreshRem, 300);    },    false  );  win.addEventListener(    "pageshow",    function(e) {      if (e.persisted) {        clearTimeout(tid);        tid = setTimeout(refreshRem, 300);      }    },    false  );  if (doc.readyState === "complete") {    doc.body.style.fontSize = 12 * dpr + "px";  } else {    doc.addEventListener(      "DOMContentLoaded",      // eslint-disable-next-line no-unused-vars      function(e) {        doc.body.style.fontSize = 12 * dpr + "px";      },      false    );  }  refreshRem();  flexible.dpr = win.dpr = dpr;  flexible.refreshRem = refreshRem;  flexible.rem2px = function(d) {    var val = parseFloat(d) * this.rem;    if (typeof d === "string" && d.match(/rem$/)) {      val += "px";    }    return val;  };  flexible.px2rem = function(d) {    var val = parseFloat(d) / this.rem;    if (typeof d === "string" && d.match(/px$/)) {      val += "rem";    }    return val;  };})(window, window["lib"] || (window["lib"] = {}));