自适应屏幕分辨率

package.json

@@ -51,6 +51,8 @@
     "js-cookie": "3.0.1",
     "jsencrypt": "3.0.0-rc.1",
     "nprogress": "0.2.0",
+    "postcss-px2rem": "^0.3.0",
+    "px2rem-loader": "^0.1.9",
     "quill": "1.3.7",
     "screenfull": "5.0.2",
     "sortablejs": "1.10.2",

src/main.js

@@ -5,7 +5,7 @@ import Cookies from 'js-cookie'
 
 import Element from 'element-ui'
 import './assets/styles/element-variables.scss'
-
+import "./utils/rem.js"; // 自适应分辨率
 import '@/assets/styles/index.scss' // global css
 import '@/assets/styles/ruoyi.scss' // ruoyi css
 import App from './App'

src/router/index.js

@@ -154,6 +154,7 @@ export const constantRoutes = [
     hidden: true,
     permissions: ['system:article:query'],
     children: [
+
       {
         path: 'article-management/article-management/article-detail/:id',
         component: () => import('@/views/article-management/article-detail'),

src/utils/rem.js

+// rem等比适配配置文件
+// 基准大小
+const baseSize = 16
+// 设置 rem 函数
+function setRem () {
+  // 当前页面屏幕分辨率相对于 1920宽的缩放比例，可根据自己需要修改
+  const scale = document.documentElement.clientWidth / 1920
+  // 设置页面根节点字体大小（“Math.min(scale, 2)” 指最高放大比例为2，可根据实际业务需求调整）
+  document.documentElement.style.fontSize = baseSize * Math.min(scale, 2) + 'px'
+}
+// 初始化
+setRem()
+// 改变窗口大小时重新设置 rem
+window.onresize = function () {
+  setRem()
+}

vue.config.js

@@ -11,6 +11,27 @@ const name = process.env.VUE_APP_TITLE || '萌宠医院信息管理平台' //
 
 const port = 1099 // 端口
 
+// 引入等比适配插件
+const px2rem = require('postcss-px2rem')
+
+// 配置基本大小
+const postcss = px2rem({
+  // 基准大小 baseSize，需要和rem.js中相同
+  remUnit: 16
+})
+// 使用等比适配插件
+module.exports = {
+  lintOnSave: true,
+  css: {
+    loaderOptions: {
+      postcss: {
+        plugins: [
+          postcss
+        ]
+      }
+    }
+  }
+}
 // vue.config.js 配置说明
 //官方vue.config.js 参考文档 https://cli.vuejs.org/zh/config/#css-loaderoptions
 // 这里只列一部分，具体配置参考文档
@@ -24,7 +45,17 @@ module.exports = {
   // 用于放置生成的静态资源 (js、css、img、fonts) 的；（项目打包之后，静态资源会放在这个文件夹下）
   assetsDir: 'static',
   // 是否开启eslint保存检测，有效值：ture | false | 'error'
-  lintOnSave: process.env.NODE_ENV === 'development',
+  // lintOnSave: process.env.NODE_ENV === 'development',
+  lintOnSave: true,
+  css: {
+    loaderOptions: {
+      postcss: {
+        plugins: [
+          postcss
+        ]
+      }
+    }
+  },
   // 如果你不需要生产环境的 source map，可以将其设置为 false 以加速生产环境构建。
   productionSourceMap: false,
   // webpack-dev-server 相关配置
@@ -47,13 +78,13 @@ module.exports = {
     },
     disableHostCheck: true
   },
-  css: {
-    loaderOptions: {
-      sass: {
-        sassOptions: { outputStyle: "expanded" }
-      }
-    }
-  },
+  // css: {
+  //   loaderOptions: {
+  //     sass: {
+  //       sassOptions: { outputStyle: "expanded" }
+  //     }
+  //   }
+  // },
   configureWebpack: {
     name: name,
     output: {