diff --git a/admin-ui/package.json b/admin-ui/package.json index bb01417..3e8b38c 100644 --- a/admin-ui/package.json +++ b/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", diff --git a/admin-ui/pnpm-lock.yaml b/admin-ui/pnpm-lock.yaml index 56f6185..9dc9e47 100644 --- a/admin-ui/pnpm-lock.yaml +++ b/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 diff --git a/admin-ui/src/assets/styles/index.scss b/admin-ui/src/assets/styles/index.scss index e73efbd..1917f5d 100644 --- a/admin-ui/src/assets/styles/index.scss +++ b/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%; } diff --git a/admin-ui/vite.config.js b/admin-ui/vite.config.js index ce0034e..336fba7 100644 --- a/admin-ui/vite.config.js +++ b/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: {