From 8755666c5d53461172c9bc60bab80ee59e291958 Mon Sep 17 00:00:00 2001 From: liushilong <2224574157@qq.com> Date: Mon, 25 Mar 2024 11:51:10 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E5=9B=9E=E6=BB=9A=E8=87=AA=E9=80=82?= =?UTF-8?q?=E5=BA=94=E5=AF=BC=E8=87=B4=E7=9A=84=E6=A0=B7=E5=BC=8F=E9=94=99?= =?UTF-8?q?=E8=AF=AF?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .postcssrc.js | 44 -------------------------------------------- package.json | 2 -- src/App.vue | 20 ++++++++++---------- src/main.ts | 1 - 4 files changed, 10 insertions(+), 57 deletions(-) delete mode 100644 .postcssrc.js diff --git a/.postcssrc.js b/.postcssrc.js deleted file mode 100644 index bd4534a..0000000 --- a/.postcssrc.js +++ /dev/null @@ -1,44 +0,0 @@ -/** - * PostCSS 配置文件 - */ - -module.exports = { - // 配置要使用的 PostCSS 插件 - plugins: { - // 配置使用 autoprefixer 插件 - // 作用：生成浏览器 CSS 样式规则前缀 - // VueCLI 内部已经配置了 autoprefixer 插件 - // 所以又配置了一次，所以产生冲突了 - // 'autoprefixer': { // autoprefixer 插件的配置 - // 配置要兼容到的环境信息 - // browsers: ['Android >= 4.0', 'iOS >= 8'] - // }, - - // 配置使用 postcss-pxtorem 插件 - // 作用：把 px 转为 rem - 'postcss-pxtorem': { - // lib-flexible 的 REM 适配方案：把一行分为 10 份，每份就是十分之一 - // 所以 rootValue 应该设置为你的设计稿宽度的十分之一 - // 我们的设计稿是 750，所以应该设置为 750 / 10 = 75 - // 但是 Vant 建议设置为 37.5，为什么？因为 Vant 是基于 375 写的 - // 所以必须设置为 37.5，唯一的缺点就是使用我们设计稿的尺寸都必须 / 2 - // 有没有更好的办法？ - // 如果是 Vant 的样式，就按照 37.5 来转换 - // 如果是 我们自己 的样式，就按照 75 来转换 - // 通过查阅文档，我们发现 rootValue 支持两种类型： - // 数字：固定的数值 - // 函数：可以动态处理返回 - // postcss-pxtorem 处理每个 CSS 文件的时候都会来调用这个函数 - // 它会把被处理的 CSS 文件相关的信息通过参数传递给该函数 - // file ： vant-button.css - // file : login.vue - mediaQuery: true, //媒体查询( @media screen 之类的)中不生效 - // unitPrecision: 5, //保留rem小数点多少位 - // selectorBlackList: [''], //则是一个对css选择器进行过滤的数组，比如你设置为['fs']，那例如fs-xl类名，里面有关px的样式将不被转换，这里也支持正则写法。 - rootValue: 16, - // 配置要转换的 CSS 属性 - // * 表示所有 - propList: ['*'] - } - } -} \ No newline at end of file diff --git a/package.json b/package.json index 5810400..36a4b15 100644 --- a/package.json +++ b/package.json @@ -49,7 +49,6 @@ "@types/node": "^18.17.1", "@types/sortablejs": "^1.15.7", "@vitejs/plugin-vue": "^4.5.0", - "amfe-flexible": "^2.2.1", "autoprefixer": "^10.4.13", "core-js": "^3.32.0", "dotenv": "^16.3.1", @@ -60,7 +59,6 @@ "less-loader": "^11.1.3", "lint-staged": "^13.1.2", "postcss": "^8.4.27", - "postcss-pxtorem": "^6.1.0", "rimraf": "^4.2.0", "sass": "^1.69.5", "tailwindcss": "^3.3.3", diff --git a/src/App.vue b/src/App.vue index a092b7a..5bf5533 100644 --- a/src/App.vue +++ b/src/App.vue @@ -45,16 +45,16 @@ const getThemeOverrides = computed(() => { }; }); -onMounted(() => { - window.addEventListener("resize", () => { - nextTick(() => { - const designWidth = 1440; - const rempPx = 16; - const scale = window.innerWidth / designWidth; - document.documentElement.style.fontSize = scale * rempPx + "px"; - }); - }); -}); +// onMounted(() => { +// window.addEventListener("resize", () => { +// nextTick(() => { +// const designWidth = 1440; +// const rempPx = 16; +// const scale = window.innerWidth / designWidth; +// document.documentElement.style.fontSize = scale * rempPx + "px"; +// }); +// }); +// });