feat: 添加rem来进行适配

LGH

2025-03-26 dbe427f7c378a57255cc81e9a8e69a0fafa1fd00

feat: 添加rem来进行适配

 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",

 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;

 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;
}

 src/utils/rem.js

New file
@@ -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 }

 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,

 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"