大屏适配方案

1. vw（1920*1080等比例缩放）

　　1. 插件px to rem & rpx & vw (cssrem)，之后可以直接用px开发，插件会将px转换成vw。(此方案底部会出现留白，可通过 vh 实现高度顶满)

　　　　 

 

2. flexible.js + rem（1920*1080等比例缩放）

　　1. 工具配置（配置完需重启编辑器） 

　　　　1.1. vscode 安装px转rem自动计算的插件　　

　　　　　　 

　　　1.2. 工具扩展中设置：因为flexible中将1920分成了24份，1rem = 80px

 　　　　　　

　　2.引入flexible.js

(function flexible(window, document) {
  var docEl = document.documentElement;
  var dpr = window.devicePixelRatio || 1;

  // adjust body font size
  function setBodyFontSize() {
    if (document.body) {
      document.body.style.fontSize = 12 * dpr + "px";
    } else {
      document.addEventListener("DOMContentLoaded", setBodyFontSize);
    }
  }
  setBodyFontSize();

  // set 1rem = viewWidth / 10
  function setRemUnit() {
    var rem = docEl.clientWidth / 24;
    docEl.style.fontSize = rem + "px";
  }

  setRemUnit();

  // reset rem unit on page resize
  window.addEventListener("resize", setRemUnit);
  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, document);

 3. 使用插件帮我们转换,（宽根据设计稿的尺寸进行设置， 高用vh）

vite.config.ts

import postcssPluginPx2rem from "postcss-plugin-px2rem"

export default ({mode}: { mode: string }) => defineConfig({
    css: {
            postcss: {
                plugins: [
                    postcssPluginPx2rem({
                      rootValue: 192, //换算基数， 默认100  ，这样的话把根标签的字体规定为1rem为50px,这样就可以从设计稿上量出多少个px直接在代码中写多上px了。
                      minPixelValue: 3 //设置要替换的最小像素值(3px会被转rem)。 默认 0
                    })
                ]
        }
    }
}