11

package.json

@@ -8,7 +8,7 @@
   },
   "dependencies": {
     "core-js": "^3.8.3",
-    "postcss-pxtorem": "^5.1.1",
+    "postcss-pxtorem": "^6.0.0",
     "register-service-worker": "^1.7.2",
     "vue": "^2.6.14",
     "vue-router": "^3.5.1",
@@ -22,6 +22,9 @@
     "@vue/cli-service": "~5.0.0",
     "less": "^4.2.0",
     "less-loader": "^8.0.0",
+    "lib-flexible": "^0.3.2",
+    "postcss": "^8.4.31",
+    "postcss-preset-env": "^9.3.0",
     "vue-template-compiler": "^2.6.14"
   },
   "browserslist": [

postcss.config.js

@@ -0,0 +1,12 @@
+module.exports = {
+  plugins: {
+    "postcss-preset-env": {
+      autoprefixer: true,
+    },
+    "postcss-pxtorem": {
+      rootValue: 16, // 基准字体大小
+      unitPrecision: 5, // 转换后的rem保留小数点位数
+      propList: ["*"], // 要转换的属性，默认转换所有属性
+    },
+  },
+};

src/main.js

@@ -4,7 +4,7 @@ import "./registerServiceWorker";
 import router from "./router";
 import store from "./store";
 // 动态设置根元素html字体大小
-import "./util/rem";
+// import "lib-flexible";
 Vue.config.productionTip = false;
 
 new Vue({

src/util/rem.js

@@ -1,17 +0,0 @@
-// rem等比适配配置文件
-// 基准大小
-const baseSize = 14;
-// 设置 rem 函数
-function setRem() {
-  // 当前页面宽度相对于 1920宽的缩放比例，可根据自己需要修改。
-  const scale = document.documentElement.clientWidth / 7680;
-  // 设置页面根节点字体大小（“Math.min(scale, 2)” 指最高放大比例为2，可根据实际业务需求调整）
-  document.documentElement.style.fontSize =
-    baseSize * Math.min(scale, 2) + "px";
-}
-// 初始化
-setRem();
-// 改变窗口大小时重新设置 `rem`
-window.onresize = function () {
-  setRem();
-};

src/views/Index.vue

@@ -15,7 +15,7 @@ export default {
 </script>
 <style scoped>
 p {
-  font-size: 20px;
+  font-size: 16px;
   width: 100px;
   height: 100px;
   background-color: red;

vue.config.js

@@ -1,24 +1,18 @@
 const { defineConfig } = require("@vue/cli-service");
 
-// 引入等比适配插件
-// const px2rem = require("postcss-px2rem");
-
-// 配置基本大小
-// const postcss = px2rem({
-//   // 基准大小 baseSize，需要和rem.js中相同
-//   // remUnit: 14 代表 1rem = 14px; 所以当你一个14px值时，它会自动转成 (14px/14)rem
-//   remUnit: 14,
-// });
 module.exports = defineConfig({
   transpileDependencies: true,
   // css: {
   //   loaderOptions: {
-  //     less: {
-  //       javascriptEnabled: true,
-  //     },
-  //     postcss: {
-  //       plugins: [postcss],
-  //     },
+  //     // css: {},
+  //     // postcss: {
+  //     //   plugins: [
+  //     //     require("postcss-px2rem")({
+  //     //       // 以设计稿750为例， 750 / 10 = 75
+  //     //       remUnit: 768,
+  //     //     }),
+  //     //   ],
+  //     // },
   //   },
   // },
 });