From dbe427f7c378a57255cc81e9a8e69a0fafa1fd00 Mon Sep 17 00:00:00 2001
From: LGH <guanghui.luo@foxmail.com>
Date: Wed, 26 Mar 2025 15:28:39 +0800
Subject: [PATCH] feat: 添加rem来进行适配
---
vite.config.mjs | 15 +++++++
src/utils/rem.js | 28 ++++++++++++++
src/main.js | 2
yarn.lock | 5 ++
package.json | 9 ++--
src/styles/variables.scss | 4 ++
6 files changed, 58 insertions(+), 5 deletions(-)
diff --git a/package.json b/package.json
index 9ed4f30..3921cfb 100644
--- a/package.json
+++ b/package.json
@@ -9,24 +9,25 @@
"serve": "vite preview --host"
},
"dependencies": {
- "element-plus": "^2.9.3",
"@element-plus/icons-vue": "^2.3.1",
- "@smallwei/avue": "^3.6.2",
- "avue-plugin-ueditor": "^1.0.4",
"@saber/nf-design-base-elp": "^1.3.0",
"@saber/nf-form-design-elp": "^1.4.1",
"@saber/nf-form-elp": "^1.4.4",
+ "@smallwei/avue": "^3.6.2",
"animate.css": "^4.1.1",
+ "avue-plugin-ueditor": "^1.0.4",
"axios": "^1.8.3",
"codemirror": "^5.65.16",
"crypto-js": "^4.1.1",
"dayjs": "^1.10.6",
"disable-devtool": "^0.3.8",
+ "element-plus": "^2.9.3",
"highlight.js": "^11.9.0",
"js-base64": "^3.7.4",
"js-cookie": "^3.0.0",
"js-md5": "^0.7.3",
"nprogress": "^0.2.0",
+ "postcss-pxtorem": "^6.1.0",
"sm-crypto": "^0.3.13",
"vue": "^3.5.13",
"vue-i18n": "^9.1.9",
@@ -37,8 +38,8 @@
"devDependencies": {
"@vitejs/plugin-vue": "^5.0.4",
"@vue/compiler-sfc": "^3.4.27",
- "sass": "^1.85.1",
"prettier": "^2.8.7",
+ "sass": "^1.85.1",
"terser": "^5.31.1",
"unplugin-auto-import": "^0.11.2",
"vite": "^5.2.12",
diff --git a/src/main.js b/src/main.js
index 28da644..c88c6f3 100644
--- a/src/main.js
+++ b/src/main.js
@@ -34,7 +34,7 @@
// import formSetting from './views/tool/formsetting.vue';
// import tenantPackage from './views/system/tenantpackage.vue';
// import tenantDatasource from './views/system/tenantdatasource.vue';
-
+import './utils/rem'
window.$crudCommon = crudCommon;
debug();
window.axios = axios;
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
index ef29df7..bf0d41a 100644
--- a/src/styles/variables.scss
+++ b/src/styles/variables.scss
@@ -1,3 +1,7 @@
$sidebar_width: 230px;
$sidebar_collapse: 60px;
$top_height: 50px;
+
+@function height($px) {
+ @return calc($px / 1080) * 100vh;
+}
diff --git a/src/utils/rem.js b/src/utils/rem.js
new file mode 100644
index 0000000..2232d1e
--- /dev/null
+++ b/src/utils/rem.js
@@ -0,0 +1,28 @@
+
+/* rem等比适配配置文件 */
+
+// 基准大小
+
+let designWidth = 1920
+
+
+// 设置 rem 函数
+const setRem = (width = 1920)=> {
+ if(width !== designWidth) {
+ designWidth = width;
+ }
+ const scale = document.documentElement.clientWidth / designWidth * 10
+ document.documentElement.style.fontSize = scale + 'px'
+}
+
+// 初始化
+setRem()
+
+function onResize() {
+ setRem(designWidth)
+}
+
+// 改变窗口大小时重新设置 rem
+window.addEventListener('resize', onResize)
+
+//export { setRem }
diff --git a/vite.config.mjs b/vite.config.mjs
index f5f278b..e28915a 100644
--- a/vite.config.mjs
+++ b/vite.config.mjs
@@ -4,6 +4,8 @@
} from 'vite';
import { resolve } from 'path'
import createVitePlugins from './vite/plugins';
+import postCssPxToRem from 'postcss-pxtorem'
+
// https://vitejs.dev/config/
export default ({
mode,
@@ -77,6 +79,19 @@
additionalData: `@use "@/styles/variables.scss" as *;`,
},
},
+ postcss: {
+ plugins: [
+ postCssPxToRem({
+ rootValue: 10, // 指定转换基准值，通常是设计稿宽度的1/10
+ propList: ['*'], // 可以从px转换为rem的属性，这里是所有属性
+ unitPrecision: 5, // 允许REM单位增长到的十进制数
+ selectorBlackList: [], // 选择器黑名单，忽略转换的选择器
+ replace: true, // 替换包含rem的规则，而不是添加回退
+ mediaQuery: false, // 允许在媒体查询中转换px
+ minPixelValue: 0 // 设置要替换的最小像素值
+ }),
+ ]
+ }
},
plugins: createVitePlugins(env, command === 'build'),
build: buildConfig,
diff --git a/yarn.lock b/yarn.lock
index 888547e..a52e77d 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1716,6 +1716,11 @@
mlly "^1.7.4"
pathe "^2.0.1"
+postcss-pxtorem@^6.1.0:
+ version "6.1.0"
+ resolved "https://registry.npmmirror.com/postcss-pxtorem/-/postcss-pxtorem-6.1.0.tgz#7e6410e30426adef53bad6c4c5f00cd5f586937c"
+ integrity sha512-ROODSNci9ADal3zUcPHOF/K83TiCgNSPXQFSbwyPHNV8ioHIE4SaC+FPOufd8jsr5jV2uIz29v1Uqy1c4ov42g==
+
postcss@^8.4.43, postcss@^8.4.48:
version "8.5.1"
resolved "https://registry.npmmirror.com/postcss/-/postcss-8.5.1.tgz"
--
Gitblit v1.9.3