全局适配

package.json

@@ -18,6 +18,7 @@
         "lodash": "^4.17.19",
         "lodash-es": "^4.17.21",
         "moment": "^2.30.1",
+        "postcss-plugin-px2rem": "^0.8.1",
         "proj4": "^2.11.0",
         "url-loader": "^4.1.0",
         "view-design": "^4.3.2",

src/main.js

@@ -36,7 +36,8 @@ window.store = store2;
 Vue.prototype.store = store2;
 
 import store from './store'
-import './utils/rem'
+// import './utils/rem'
+import './utils/flexible.js'
 
 // 工具配置
 import Resource from "./common/js/language" //语言选择

src/utils/flexible.js

@@ -0,0 +1,44 @@
+// (function flexible(window, document) {
+//     var docEl = document.documentElement
+//     var dpr = window.devicePixelRatio || 1
+   
+//     // adjust body font size
+//     function setBodyFontSize() {
+//       if (document.body) {
+//         document.body.style.fontSize = (12 * dpr) + 'px'
+//       }
+//       else {
+//         document.addEventListener('DOMContentLoaded', setBodyFontSize)
+//       }
+//     }
+//     setBodyFontSize();
+   
+//     // set 1rem = viewWidth / 10 原版是10等分，这里把屏幕平均划分为24等分 1920
+//     function setRemUnit() {
+//       var rem = docEl.clientWidth / 24
+//       docEl.style.fontSize = rem + 'px'
+//     }
+   
+//     setRemUnit()
+   
+//     // reset rem unit on page resize
+//     window.addEventListener('resize', setRemUnit)
+//     window.addEventListener('pageshow', function (e) {
+//       if (e.persisted) {
+//         setRemUnit()
+//       }
+//     })
+   
+//     // detect 0.5px supports
+//     if (dpr >= 2) {
+//       var fakeBody = document.createElement('body')
+//       var testElement = document.createElement('div')
+//       testElement.style.border = '.5px solid transparent'
+//       fakeBody.appendChild(testElement)
+//       docEl.appendChild(fakeBody)
+//       if (testElement.offsetHeight === 1) {
+//         docEl.classList.add('hairlines')
+//       }
+//       docEl.removeChild(fakeBody)
+//     }
+//   }(window, document))

src/views/cockpit/common/Title.vue

@@ -42,8 +42,9 @@ export default {
 <style lang="scss" scoped>
 
 .title {
+    width: 25rem;
     border-width: 0px;
-    line-height: 3.5vh;
+    line-height: 2rem;
     height: 4vh;
     background: no-repeat;
     background-size: 100%;
@@ -53,7 +54,7 @@ export default {
         color: #fff;
         font-size: 14px;
         font-weight: bold;
-        margin-left: 3vw;
+        margin-left: 2.7rem;
     }
 }
 </style>

vue.config.js

@@ -125,4 +125,24 @@
 //             };
 //         });
 //     },
-// };
+// };
+
+module.exports = {
+    css: {
+        loaderOptions: {
+            postcss: {
+                postcssOptions: {
+                    plugins: [
+                        require("postcss-plugin-px2rem")({
+                            rootValue: 16, //换算基数， 默认100  ，这样的话把根标签的字体规定为1rem为50px,这样就可以从设计稿上量出多少个px直接在代码中写多上px了。
+                            exclude: /(node_module)/, //默认false，可以（reg）利用正则表达式排除某些文件夹的方法，例如/(node_module)/ 。如果想把前端UI框架内的px也转换成rem，请把此属性设为默认值
+                            mediaQuery: false, //（布尔值）允许在媒体查询中转换px。
+                            minPixelValue: 3, //设置要替换的最小像素值(3px会被转rem)。 默认 0
+                        }),
+                    ],
+                },
+            },
+        },
+    },
+};
+