pad端分辨率自适应

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",
     "viewerjs": "^1.11.6",

src/main.js

@@ -2,6 +2,7 @@ import Vue from 'vue'
 import 'normalize.css/normalize.css' // A modern alternative to CSS resets
 import moment from 'moment'
 import Element from 'element-ui'
+import './utils/rem.js' // 自适应分辨率
 // import ElementUI from 'element-ui'
 // import './styles/element-variables.scss'
 // import locale from 'element-ui/lib/locale/lang/en' // lang i18n

src/styles/themeA/user.scss

 $color-theme: #f4ac10;
 .user-manage{
     font-size: 18px;
+  .deptTree{
+    background: #f4f4f4;
+    height: 100%
+  }
     .placeholder{
       height:14px;
       background-color: #F4F4F4

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'
+  // 设置页面根节点字体大小, 字体大小最小为12
+  const fontSize = (baseSize * Math.min(scale, 2)) > 16 ? (baseSize * Math.min(scale, 2)) : 16
+  document.documentElement.style.fontSize = fontSize + 'px'
+}
+// 初始化
+setRem()
+// 改变窗口大小时重新设置 rem
+window.onresize = function() {
+  setRem()
+}

src/views/system/user/index.vue

@@ -78,7 +78,7 @@
     </div>
     <el-row :gutter="20">
       <!--部门数据-->
-      <el-col :span="4" :xs="24" style="background: #f4f4f4;height: 100%" @click.native="clickBlank">
+      <el-col :span="4"  class="deptTree" @click.native="clickBlank">
         <div class="head-container" style="padding: 10px 6px;background: #FFFFFF">
           <el-input
             v-model="deptName"
@@ -108,7 +108,7 @@
         </div>
       </el-col>
       <!--用户数据-->
-      <el-col :span="20" :xs="24">
+      <el-col :span="20" >
         <div class="tableTitle">用户管理列表</div>
         <el-table
           v-loading="loading"

vue.config.js

@@ -21,6 +21,16 @@ 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 || 8080 // 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 = {
   /**
@@ -34,6 +44,11 @@ module.exports = {
     loaderOptions: {
       sass: {
         data: '@import "@/styles/variables.scss";'
+      },
+      postcss: {
+        plugins: [
+          postcss
+        ]
       }
     }
   },