vue3 vite4 中 配置px转rem

下载依赖:
amfe-flexible: 移动端适配
文档: https://www.npmjs.com/package/amfe-flexible
下载: npm install amfe-flexible
postcss-pxtorem: px转rem
文档: https://www.npmjs.com/package/postcss-pxtorem
下载: npm install postcss-pxtorem

2.引入配置:
main.ts:
/ px转rem /
import "amfe-flexible";
vite.config.ts:

/* 引入px转rem */
const postCssPxToRem = require("postcss-pxtorem");

在css部分添加:

css: {
 // 此代码为适配移动端px2rem
 postcss: {
 plugins: [
 postCssPxToRem({
 rootValue: 37.5, // 1rem的大小(控制1rem的大小 点位:px)
 propList: ["*"], // 需要转换的属性,这里选择全部都进行转换
 }),
 ],
 },
},

3.设置,在App.vue中初始化:

onMounted(() => {
 /* px转rem */
 const baseSize = 38;
 /* 设置 rem 函数 */
 function setRem() {
 /* 当前页面宽度缩放比例,可根据自己需要修改 */
 const scale = document.documentElement.clientWidth / 1920;
 /* 设置页面根节点字体大小 */
 document.documentElement.style.fontSize =
 baseSize * Math.min(scale, 2) + "px";
 }
 /* 初始化 rem */
 setRem();
 window.onresize = () => {
 /* 改变窗口大小时重新设置 rem */
 setRem();
 });
});
作者:WEB菜鸟原文地址:https://segmentfault.com/a/1190000043739042

%s 个评论

要回复文章请先登录注册