分辨率自适应

package.json

@@ -31,6 +31,8 @@
     "normalize.css": "7.0.0",
     "nprogress": "0.2.0",
     "path-to-regexp": "2.4.0",
+    "postcss-px2rem": "^0.3.0",
+    "px2rem-loader": "^0.1.9",
     "qs": "^6.9.4",
     "v-viewer": "^1.5.1",
     "vee-validate": "^4.11.6",

src/main.js

@@ -16,6 +16,7 @@ import permission from './directive/permission'
 import '@/icons' // icon
 import '@/assets/icons' // icon
 import '@/permission' // permission control
+import './utils/rem.js' // 自适应分辨率
 
 /**
  * If you don't want to use mock-server

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()
+}

src/views/checkList.vue

@@ -15,36 +15,36 @@
           <div class="formLabel">
             <div class="left">
               <el-form-item label="厂家:">
-                <el-input v-model="oneForm.manufacturer" style="width: 300px" />
+                <el-input v-model="oneForm.manufacturer" class="normalInput" />
               </el-form-item>
               <el-form-item label="ODE:">
-                <el-input v-model="oneForm.ODE" style="width: 300px" />
+                <el-input v-model="oneForm.ODE"  class="normalInput" />
               </el-form-item>
               <el-form-item label="LOT:">
-                <el-input v-model="oneForm.LOT" style="width: 300px" />
+                <el-input v-model="oneForm.LOT"  class="normalInput" />
               </el-form-item>
               <el-form-item label="数量:">
-                <el-input v-model="oneForm.quantity" style="width: 300px" />
+                <el-input v-model="oneForm.quantity"  class="normalInput" />
               </el-form-item>
             </div>
             <div class="right">
               <el-form-item label="rank:">
-                <el-input v-model="oneForm.rank" style="width: 300px" />
+                <el-input v-model="oneForm.rank"  class="normalInput" />
               </el-form-item>
               <!--              外观-->
               <div class="appearance">
                 <div class="appearanceTest">外观</div>
                 <div class="appearanceForm">
                   <el-form-item label="抽样:">
-                    <el-input v-model="oneForm.sample" style="width: 80px" />
+                    <el-input class="smallInput" v-model="oneForm.sample" />
                   </el-form-item>
                   <el-form-item label="不良:">
-                    <el-input v-model="oneForm.badness" style="width: 80px" />
+                    <el-input class="smallInput" v-model="oneForm.badness" />
                   </el-form-item>
                 </div>
               </div>
               <el-form-item label="项目:">
-                <el-input v-model="oneForm.project" style="width: 300px" />
+                <el-input v-model="oneForm.project"  class="normalInput" />
               </el-form-item>
             </div>
           </div>
@@ -275,6 +275,12 @@ export default {
   }
    //检查表主题
    .checkList{
+     .smallInput{
+       width: 80px;
+     }
+     .normalInput{
+       width: 300px;
+     }
      .oneCheck{
        width: 60%;
        margin-left: 20%;

vue.config.js

@@ -21,6 +21,15 @@ const name = defaultSettings.title || 'vue Admin Template' // page title
 // port = 9528 npm run dev OR npm run dev --port = 9528
 const port = process.env.port || process.env.npm_config_port || 9706 // dev port
 
+// 引入等比适配插件
+const px2rem = require('postcss-px2rem')
+
+// 配置基本大小
+const postcss = px2rem({
+  // 基准大小 baseSize，需要和rem.js中相同
+  remUnit: 16
+})
+
 // All configuration item explanations can be find in https://cli.vuejs.org/config/
 module.exports = {
   /**
@@ -30,17 +39,30 @@ module.exports = {
    * In most cases please use '/' !!!
    * Detail: https://cli.vuejs.org/config/#publicpath
    */
+  // css: {
+  //   loaderOptions: {
+  //     sass: {
+  //       data: '@import "@/styles/variables.scss";'
+  //     }
+  //   }
+  // },
+  publicPath: process.env.NODE_ENV !== 'development' ? './' : '/',
+  outputDir: `dist`,
+  assetsDir: 'static',
+  // lintOnSave: process.env.NODE_ENV === 'development',
+  lintOnSave: true,
   css: {
     loaderOptions: {
+      postcss: {
+        plugins: [
+          postcss
+        ]
+      },
       sass: {
         data: '@import "@/styles/variables.scss";'
       }
     }
   },
-  publicPath: process.env.NODE_ENV !== 'development' ? './' : '/',
-  outputDir: `dist`,
-  assetsDir: 'static',
-  lintOnSave: process.env.NODE_ENV === 'development',
   productionSourceMap: false,
   devServer: {
     // port: port,