pc 端页面 rem适配

我用的vsc组件是 px to rem & rpx & vw (cssrem)

自己设置 设计搞宽度 和 基准值 点击插件 扩展设置

代码实例:

mounted(){
    this.setRem()
}
methods:{
    // rem适配
    setRem: function () {
      //这里是页面一加载就先执行一次,设置当前设备下,html的字体大小
      setHtmlFontSize();

      //添加resize和scroll事件，在尺寸变化时执行适配函数
      window.addEventListener("resize", setHtmlFontSize);
      window.addEventListener("scroll", setHtmlFontSize);
      function setHtmlFontSize() {
        // 1. 获取当前的屏幕的宽度和高度
        var windowWidth = document.documentElement.offsetWidth;
        var windowHeight = window.innerHeight;

        // 2.计算适配比例，取宽度和高度的最小比例
        var scale = Math.min(windowWidth / 1920, windowHeight / 1080);

        // 3.根据比例计算字体大小或其他元素的样式
        var htmlFontSize = scale * 100; // 假设设计图使用100px作为参照

        //给最大值 超过了200px默认为200px
        if (htmlFontSize > 200) {
          htmlFontSize = 200;
        }

        document.querySelector("html").style.fontSize = htmlFontSize + "px";
      }
    },
}