1.在需要的項(xiàng)目或者頁(yè)面中引入該js文件即可(文字大小會(huì)隨根節(jié)點(diǎn)變化 不同尺寸下展示效果不一直)

// 新建JS文件拷入下方代碼
(function flexible(window, document) {
  var docEl = document.documentElement; 
    
  var dpr = window.devicePixelRatio || 1;
  var isIframe = window.self !== window.top;
  if (isIframe) {
    // 當(dāng)前頁(yè)面被嵌套在一個(gè)iframe中
    console.log("當(dāng)前頁(yè)面在iframe中涮较。");
  } else {
    // 當(dāng)前頁(yè)面不在iframe中
    console.log("當(dāng)前頁(yè)面不在iframe中。");
  }

  // adjust body font size
  // function setBodyFontSize () {
  //   if (document.body) {
  //     document.body.style.fontSize = (12 * dpr) + 'px'
  //   }
  //   else {
  //     document.addEventListener('DOMContentLoaded', setBodyFontSize)
  //   }
  // }
  // setBodyFontSize();
  function detectZoom() {
    let ratio = 0;
    const screen = window.screen;
    const ua = navigator.userAgent.toLowerCase();
    if (window.devicePixelRatio !== undefined) {
      ratio = window.devicePixelRatio;
    } else if (~ua.indexOf("msie")) {
      if (screen.deviceXDPI && screen.logicalXDPI) {
        ratio = screen.deviceXDPI / screen.logicalXDPI;
      }
    } else if (
      window.outerWidth !== undefined &&
      window.innerWidth !== undefined
    ) {
      ratio = window.outerWidth / window.innerWidth;
    }
    if (ratio) {
      ratio = Math.round(ratio * 100);
    }
    return ratio;
  }
  // set 1rem = viewWidth / 10
  function setRemUnit() {
    var rem = docEl.clientWidth / 120;
    if (!isIframe) {
      if(document.body){
        document.body.classList.add('hidden');
      } 
      if(document.body){ 
        setTimeout(() => {
          document.body.classList.remove('hidden');
        }, 100);
      
      } 
      let zoom = 100 / detectZoom();
      // console.log(rem, zoom,'zoom')
      if(zoom < 1.2 && zoom > 0.8){
        docEl.style.fontSize = rem + rem * (1 - zoom  )  + "px";
      }else if(zoom >= 1.2){
        docEl.style.fontSize = rem + rem * (1 - 1.2  )  + "px";
      }else if(zoom <= 0.8){
        docEl.style.fontSize = rem + rem * (1 - 0.8  )  + "px";
      }
     
    
    } else {
      //獲取 window.top.document font-size
      var fontSize = window.top.document.documentElement.style.fontSize;
      docEl.style.fontSize = fontSize;
    }
  }

  setRemUnit();
  function throttle(func, delay) {
    let timer = null;
    return function() {
        if (!timer) {
            timer = setTimeout(function() {
                func.apply(this, arguments);
                timer = null;
            }, delay);
        }
    };
}
  // reset rem unit on page resize
  window.addEventListener("resize", throttle(setRemUnit,200));
  window.addEventListener("pageshow", function (e) {
    if (e.persisted) {
      setRemUnit();
    }
  });

  // detect 0.5px supports
  if (dpr >= 2) {
    var fakeBody = document.createElement("body");
    var testElement = document.createElement("div");
    testElement.style.border = ".5px solid transparent";
    fakeBody.appendChild(testElement);
    docEl.appendChild(fakeBody);
    if (testElement.offsetHeight === 1) {
      docEl.classList.add("hairlines");
    }
    docEl.removeChild(fakeBody);
  }

  window.addEventListener('mousewheel', function (event) {
    if (event.ctrlKey === true || event.metaKey) {
          let zoom =  detectZoom();
          if(zoom <=  80 && event.deltaY > 0){
            event.preventDefault();
          }else if(zoom >= 120 && event.deltaY < 0){
            event.preventDefault();
          }
      }
  }, {passive: false});

  //firefox
  window.addEventListener('DOMMouseScroll', function (event) {
    if (event.ctrlKey === true || event.metaKey) {
      let zoom =  detectZoom();
      if(zoom <=  80 && event.deltaY > 0){
        event.preventDefault();
      }else if(zoom >= 120 && event.deltaY < 0){
        event.preventDefault();
      }
  }
  }, {passive: false}); 
 
  document.addEventListener('keydown', function (event) {
    const zoom = detectZoom(); // 獲取屏幕縮放比例 
    if ((event.ctrlKey || event.metaKey) && [61, 107, 173, 109, 187, 189].includes(event.which)) {
        if ((zoom >= 120 && (event.which === 107 || event.which === 61)) || (zoom <= 80 && (event.which === 109 || event.which === 173))) {
            event.preventDefault(); // 阻止默認(rèn)行為
        } 
    }
}, false);
})(window, document);

2.在需要的項(xiàng)目或者頁(yè)面中引入該js文件即可(文字大小不會(huì)隨根節(jié)點(diǎn)變化及不同尺寸下展示效果一直)

(function (window, document) {
  var docEl = document.documentElement;
  var resizeEvt =
    "orientationchange" in window ? "orientationchange" : "resize";
  var recalc = function () {
    var clientWidth = docEl.clientWidth;
    if (!clientWidth) return;

    // 以設(shè)計(jì)稿寬度 1920px 為基準(zhǔn)，調(diào)整根字體大小
    // 目標(biāo)：1rem = 16px, 基準(zhǔn)寬度：1920px
    docEl.style.fontSize = (clientWidth / 1920) * 16 + "px";
  };

  function detectZoom() {
    let ratio = 0;
    const screen = window.screen;
    const ua = navigator.userAgent.toLowerCase();
    if (window.devicePixelRatio !== undefined) {
      ratio = window.devicePixelRatio;
    } else if (~ua.indexOf("msie")) {
      if (screen.deviceXDPI && screen.logicalXDPI) {
        ratio = screen.deviceXDPI / screen.logicalXDPI;
      }
    } else if (
      window.outerWidth !== undefined &&
      window.innerWidth !== undefined
    ) {
      ratio = window.outerWidth / window.innerWidth;
    }
    if (ratio) {
      ratio = Math.round(ratio * 100);
    }
    return ratio;
  }

  window.addEventListener('mousewheel', function (event) {
    if (event.ctrlKey === true || event.metaKey) {
          let zoom =  detectZoom();
          if(zoom <=  80 && event.deltaY > 0){
            event.preventDefault();
          }else if(zoom >= 120 && event.deltaY < 0){
            event.preventDefault();
          }
      }
  }, {passive: false});

  //firefox
  window.addEventListener('DOMMouseScroll', function (event) {
    if (event.ctrlKey === true || event.metaKey) {
      let zoom =  detectZoom();
      if(zoom <=  80 && event.deltaY > 0){
        event.preventDefault();
      }else if(zoom >= 120 && event.deltaY < 0){
        event.preventDefault();
      }
  }
  }, {passive: false}); 

  // 初始調(diào)用
  if (!document.addEventListener) return;
  window.addEventListener(resizeEvt, recalc, false);
  document.addEventListener("DOMContentLoaded", recalc, false);
  // 調(diào)用一次 recalc 來(lái)初始化字體大小
  recalc();
})(window, document);