网上有很多Vue3.0 + vite 自适应PC端的文章,我也尝试过其他方式,只有这种方式在我项目中没出现各种各样的问题。遂,先把这种方式记录下来,以下是步骤:
1、下载包
npm install lib-flexible-computer postcss-px2rem px2rem-loader --save
2、在main.ts里引入
import "lib-flexible-computer";
3、在vite.config.ts写入
import px2rem from "postcss-px2rem"
css:{
plugins: {
"postcss-px-to-viewport": {
unitToConvert: "px", // 需要转换的单位,默认为"px"
viewportWidth: 1920, // 设计稿的视口宽度
unitPrecision: 5, // 单位转换后保留的精度
propList: ["*"], // 能转化为vw的属性列表
viewportUnit: "vw", // 希望使用的视口单位
fontViewportUnit: "vw", // 字体使用的视口单位
selectorBlackList: [], // 需要忽略的CSS选择器,不会转为视口单位,使用原有的px等单位。