update px2rem

admin-ui/package.json

@@ -38,6 +38,7 @@
   "devDependencies": {
     "@vitejs/plugin-vue": "3.1.0",
     "@vue/compiler-sfc": "3.2.45",
+    "postcss-plugin-px2rem": "^0.8.1",
     "sass": "1.56.1",
     "unplugin-auto-import": "0.11.4",
     "vite": "3.2.7",

admin-ui/pnpm-lock.yaml

@@ -75,6 +75,9 @@ importers:
       '@vue/compiler-sfc':
         specifier: 3.2.45
         version: 3.2.45
+      postcss-plugin-px2rem:
+        specifier: ^0.8.1
+        version: 0.8.1
       sass:
         specifier: 1.56.1
         version: 1.56.1
@@ -1259,6 +1262,9 @@ packages:
     resolution: {integrity: sha512-d7Uw+eZoloe0EHDIYoe+bQ5WXnGMOpmiZFTuMWCwpjzzkL2nTjcKiAk4hh8TjnGye2TwWOk3UXucZ+3rbmBa8Q==}
     engines: {node: '>= 0.4'}
 
+  postcss-plugin-px2rem@0.8.1:
+    resolution: {integrity: sha512-gNxhrnR57pnGrPLLqVNWY9+BWgj46kYkphw+0gpRJf9tjgwI7/tLqQPK7KdlksB2SSAddOb11otDVwri8b8mXw==}
+
   postcss-prefix-selector@1.16.1:
     resolution: {integrity: sha512-Umxu+FvKMwlY6TyDzGFoSUnzW+NOfMBLyC1tAkIjgX+Z/qGspJeRjVC903D7mx7TuBpJlwti2ibXtWuA7fKMeQ==}
     peerDependencies:
@@ -2917,6 +2923,10 @@ snapshots:
 
   possible-typed-array-names@1.0.0: {}
 
+  postcss-plugin-px2rem@0.8.1:
+    dependencies:
+      postcss: 5.2.18
+
   postcss-prefix-selector@1.16.1(postcss@5.2.18):
     dependencies:
       postcss: 5.2.18

admin-ui/src/assets/styles/index.scss

@@ -20,10 +20,16 @@ label {
 }
 
 html {
+  font-size: 1vw;
   height: 100%;
   box-sizing: border-box;
 }
 
+@media screen and (max-width:1400px) {
+  html {
+    font-size: 14px;
+  }
+}
 #app {
   height: 100%;
 }

admin-ui/vite.config.js

@@ -1,6 +1,7 @@
 import { defineConfig, loadEnv } from 'vite'
 import path from 'path'
 import createVitePlugins from './vite/plugins'
+import px2rem from 'postcss-plugin-px2rem'
 
 // https://vitejs.dev/config/
 export default defineConfig(({ mode, command }) => {
@@ -49,6 +50,18 @@ export default defineConfig(({ mode, command }) => {
     css: {
       postcss: {
         plugins: [
+          px2rem({
+            rootValue: 19.2,  //换算基数， 默认100 ,也就是1440px ，这样的话把根标签的字体规定为1rem为50px,这样就可以从设计稿上量出多少个px直接在代码中写多少px了
+            unitPrecision: 5, //允许REM单位增长到的十进制数字，其实就是精度控制
+            // propWhiteList: [], // 默认值是一个空数组，这意味着禁用白名单并启用所有属性。
+            // propBlackList: [], // 黑名单
+            // exclude:false,  //默认false，可以（reg）利用正则表达式排除某些文件夹的方法，例如/(node_module)/ 。如果想把前端UI框架内的px也转换成rem，请把此属性设为默认值
+            // selectorBlackList: [], //要忽略并保留为px的选择器
+            // ignoreIdentifier: false, //（boolean/string）忽略单个属性的方法，启用ignoreidentifier后，replace将自动设置为true。
+            // replace: true, // （布尔值）替换包含REM的规则，而不是添加回退。
+            mediaQuery: false, //（布尔值）允许在媒体查询中转换px
+            minPixelValue: 0  //设置要替换的最小像素值(3px会被转rem)。 默认 0
+          }),
           {
             postcssPlugin: 'internal:charset-removal',
             AtRule: {