vue3 postcss-pxtorem转rem适配方案

1.在index.html加上计算浏览器大小代码

<script>
      (function flexible(window, document) {
        var docEl = document.documentElement;
        // 获取当前显示设备的物理像素分辨率与CSS像素分辨率之比;
        var dpr = window.devicePixelRatio || 1;

        //根据分辨率调整全局字体大小
        function setBodyFontSize() {
          // html已完成加载，则立即调整字体大小，否则等待html加载完成再调整字体大小
          if (document.body) {
            document.body.style.fontSize = 12 * dpr + "px";
          } else {
            // 监听DOMContentLoaded 事件——当初始的 HTML 文档被完全加载和解析完成之后触发，无需等待样式表
            document.addEventListener("DOMContentLoaded", setBodyFontSize);
          }
        }
        setBodyFontSize();

        // 根据屏幕宽度，重置1rem的长度为当前屏幕宽度的1/10
        function setRemUnit() {
          var rem = docEl.clientWidth / 10;
          // 1rem的值永远为根元素的字体大小，所以此处通过调整全局字体大小来重置rem
          docEl.style.fontSize = rem + "px";
        }

        setRemUnit();

        // 监听resize事件——屏幕大小发生变化时触发
        window.addEventListener("resize", setRemUnit);
        // 监听pageshow事件——显示页面时触发
        window.addEventListener("pageshow", function (e) {
          // 若是浏览器中点击后退时显示页面，则重置rem
          if (e.persisted) {
            setRemUnit();
          }
        });

        // 检测是否支持0.5px
        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);
    </script>

2.下载postcss-pxtorem包

pnpm i postcss-pxtorem -s

3.配置vite.config.ts下边的css板块

import postCssPxToRem from 'postcss-pxtorem'

//在defineconfig里面加入下面的代码
css: {
      postcss: {
				plugins: [
						postCssPxToRem({
							// 自适应，px>rem转换
							rootValue: 192, //pc端建议：192，移动端建议：75；设计稿宽度的1 / 10
							propList: ['*'], //  需要转换的属性，这里选择全部都进行转换
							//selectorBlackList: [''], //不进行px转换的选择器
						 //unitPrecision: 5, // 转换后的精度，即小数点位数
							replace: true, // 是否直接更换属性值而不添加备份属性
							mediaQuery: true, // 是否在媒体查询中也转换px为rem
							minPixelValue: 0 // 设置要转换的最小像素值
					})
				]
		}
},