博客

常见的vw vh rem 的常规方法这里不做过多赘述

用css的缩放transform:scale(当前分辨率/标准尺寸)

适用按照标准设计图开发,避免使用vw vh rem 之类的单位

(function selfAdaption(_w, force = 0) {
  const Html = document.querySelector("html");
  const Body = document.querySelector("body");
  (function init() {
    //初始化执行一次,撑满整个屏幕
    Html.style.width = _w + "px";
    Body.style.width = _w + "px";
    Body.style.overflowX = "hidden";
    Body.style.overflowY = "auto";
    Html.style.transform = `scale(${Html.clientWidth / _w})`;
    Html.style.transformOrigin = "left top";
  })();
  if (force) {
    let time = null;
    //避免触发过于频繁,做节流
    function _j() {
      if (time) clearTimeout(time);
      time = setTimeout(() => {
        Html.style.transform = `scale(${Html.clientWidth / _w})`;
        time = null
      }, force);
    }
    window.onresize = function () {//监听全屏分辨率的变化
      _j();
    };
  }
})(800);//第一个参数是标准尺寸的宽度,接收一个number 第二个选传接收number,节流的时间,接收第二个参数后强制全屏撑满 鼠标滚轮缩放也不好用