1.相关依赖下载:
npm install postcss-pxtorem --save
npm install amfe-flexible --save
2.在main.ts中引入
import 'amfe-flexible'
3.在vite.config.ts中进行配置
当项目内只需要有UI设计稿这一种基准宽度时,使用下述配置方法
// 引入pxtorem插件
import postCssPxToRem from "postcss-pxtorem";
export default defineConfig({
plugins: [vue()],
css: {
postcss: {
plugins: [
postCssPxToRem({
// 配置在将px转化为rem时 1rem等于多少px(因为我们搭配使用了amfe-flexible插件 此处我们需要设置的值应是UI设计稿全屏基准宽度的十分之一)
// 当UI设计稿的全屏基准宽度是1920px时 此处设置的值为192
rootValue: 192,
// 所有px均转化为rem
propList: ["*"]
// 若想设置部分样式不转化 可以在配置项中写出
// eg: 除 border和font-size外 所有px均转化为rem
// propList: ["*", "!border","!font-size"],
})
]
}
}
})
当项目内引入了vantUI组件库,vant的UI设计稿基准宽度是375px,如果与我们开发时UI给出的设计稿基准宽度不同,使用下述配置方法(移动端有时会引入vant组件库)
// 引入pxtorem插件
import postCssPxToRem from "postcss-pxtorem";
export default defineConfig({
plugins: [vue()],
css: {
postcss: {
plugins: [
postCssPxToRem({
// 配置在将px转化为rem时 1rem等于多少px(因为我们搭配使用了amfe-flexible插件 此处我们需要设置的值应是UI设计稿全屏基准宽度的十分之一)
// 当UI设计稿的全屏基准宽度是750px时 此处设置的值为75 但项目中使用了vant组件库 vant的设计稿总宽度是375px 其十分之一应是37.5(需要区分设置)
rootValue ({ file }) {
return file.indexOf('vant') !== -1 ? 37.5 : 75
},
// 所有px均转化为rem
propList: ["*"]
// 若想设置部分样式不转化 可以在配置项中写出
// eg: 除 border和font-size外 所有px均转化为rem
// propList: ["*", "!border","!font-size"],
})
]
}
}
})
Echarts图表适配:
- 复制图中所框区域放到vue3项目onMounted生命周期里实现图表自适应