修改样式

.postcssrc.js

@@ -6,16 +6,16 @@ module.exports = {
     "postcss-url": {},
     // to edit target browsers: use "browserslist" field in package.json
     autoprefixer: {},
-    // "postcss-pxtorem": {
-    //   // 此处为添加部分
-    //   rootValue: 16, // 对应16px 适配移动端750px宽度
-    //   unitPrecision: 5,
-    //   propList: ["*"],
-    //   selectorBlackList: [".el",".mint"],
-    //   replace: true,
-    //   mediaQuery: false,
-    //   minPixelValue: 0,
-    //   exclude: /src/
-    // }
+    "postcss-pxtorem": {
+      // 此处为添加部分
+      rootValue: 16, // 对应16px 适配移动端750px宽度
+      unitPrecision: 5,
+      propList: ["*"],
+      selectorBlackList: [".el",".mint"],
+      replace: true,
+      mediaQuery: false,
+      minPixelValue: 0,
+      exclude: /src/
+    }
   }
 };

src/libs/dpr.js

@@ -0,0 +1,24 @@
+// function dpr(){
+
+//     if (!dpr && !scale) {
+//         if (isIPhone) {
+//             // iOS下，对于2和3的屏，用2倍的方案，其余的用1倍方案
+//             if (devicePixelRatio >= 3 && (!dpr || dpr >= 3)) {
+//                 dpr = 3;
+//             } else if (devicePixelRatio >= 2 && (!dpr || dpr >= 2)){
+//                 dpr = 2;
+//             } else {
+//                 dpr = 1;
+//             }
+//         } else {
+//             // 其他设备下，仍旧使用1倍的方案
+//             // dpr = 1;
+//            // 其他设备下，改为使用设备当前的dpr
+//             dpr = devicePixelRatio;
+//         }
+//         scale = 1 / dpr;
+//     }
+// }
+
+// dpr()
+

src/libs/functionPad.js

@@ -1,17 +1,22 @@
 export function mediaMatches() {
   let sqls = [
-    // window.matchMedia("(max-width:418px)"), //和CSS一样，也要注意顺序！
+    window.matchMedia("(max-width:415px)"), //和CSS一样，也要注意顺序！
     window.matchMedia("(max-width:767px)"),
-    window.matchMedia("(max-width:992px)"),
+    window.matchMedia("(max-width:1024px)"),
     window.matchMedia("(max-width:1200px)")
   ];
   if (sqls[0].matches) {
-    console.log(">418 & <=768"); // do something...
-    document.documentElement.style.fontSize = 30 + "px";
-  } else if (sqls[2].matches) {
-    console.log(">768 & <=992"); // do something...
+    console.log("415"); // do something...
+    // document.documentElement.style.fontSize = 30 + "px";
+    document.documentElement.style.setProperty("font-size",30 + "px","important");
+  } else if (sqls[1].matches) {
+    console.log(">415 & <=767"); // do something...
+    // document.documentElement.style.fontSize = 40 + "px";
+    document.documentElement.style.setProperty("font-size",40 + "px","important");
   } else if (sqls[3].matches) {
-    console.log("> 992 & <=1200"); // do something...
+    console.log("> 767 & <=1024"); // do something...
+    // document.documentElement.style.fontSize = 50 + "px";
+    document.documentElement.style.setProperty("font-size",50 + "px","important");
   } else {
     console.log(">1200");
   }

src/main.js

@@ -9,7 +9,7 @@ import "mint-ui/lib/style.css";
 import "./assets/styles/iconfont.css";
 import "./permission";
 
-import "lib-flexible";
+// import "lib-flexible";
 
 import "@/styles/reset.scss";
 import "@/styles/variables.scss";
@@ -24,6 +24,7 @@ import ElementUI from "element-ui";
 import "element-ui/lib/theme-chalk/index.css";
 import pinyin from "js-pinyin";
 // import "./libs/rem.js";
+// import "./libs/dpr.js";
 import {
   DropdownMenu,
   DropdownItem,

src/pages/main/DetailsPage.vue

@@ -56,6 +56,7 @@
 
 <script>
 import "@/styles/style.scss";
+import "@/styles/media.scss";
 import SideBar from "@/pages/layout/SideBar";
 import TodayTab from "./today/TodayTab";
 import DialysisTab from "./dialysis/DialysisTab";
@@ -92,7 +93,8 @@ export default {
         window.matchMedia("(max-width:768px)"),
         window.matchMedia("(max-width:992px)"),
         window.matchMedia("(max-width:1200px)")
-      ]
+      ],
+      clientHeight: document.body.clientHeight
     };
   },
   created() {
@@ -108,6 +110,15 @@ export default {
     this.patient_name = patient_name;
     this.GetPatientInfoWithDiseases(this.patient_id);
   },
+  mounted(){
+    const that = this
+    window.onresize = () => {
+        return (() => {
+            window.clientHeight = document.body.clientHeight
+            that.clientHeight = window.clientHeight
+        })()
+    }
+  },
   methods: {
     ClickTab: function(tabIndex) {
       this.index = tabIndex;
@@ -149,8 +160,25 @@ export default {
       var patient_id = this.$route.query.patient_id;
       this.$router.push("/mypatients/" + patient_id);
     }
+  },
+  watch:{
+    clientHeight(val){
+      // 为了避免频繁触发resize函数导致页面卡顿，使用定时器
+      if(!this.timer){
+        // 一旦监听到的screenWidth值改变，就将其重新赋给data里的screenWidth
+        this.clientHeight = val
+        this.timer = true
+        let that = this
+        setTimeout(function(){
+            // 打印screenWidth变化的值
+            console.log(that.clientHeight)
+            that.timer = false
+            that.mediaMatches();
+        },400)
+      }
+    }
   }
-};
+}
 </script>
 
 <style style="stylesheet/scss" lang="scss" scoped>

src/pages/main/index.vue

@@ -36,7 +36,8 @@ export default {
         window.matchMedia("(max-width:767px)"),
         window.matchMedia("(max-width:1024px)"),
         window.matchMedia("(max-width:1200px)")
-      ]
+      ],
+      clientHeight: document.body.clientHeight
     };
   },
   components: {
@@ -61,6 +62,13 @@ export default {
     // this.timerDia = window.setInterval(() => {
     //   setTimeout(this.requestDialysisScheduals(), 0)
     // }, 10000)
+     const that = this
+    window.onresize = () => {
+        return (() => {
+            window.clientHeight = document.body.clientHeight
+            that.clientHeight = window.clientHeight
+        })()
+    }
   },
   // beforeDestroy () {
   //   clearInterval(this.timer)
@@ -222,13 +230,16 @@ export default {
       ];
       if (sqls[0].matches) {
         console.log("415"); // do something...
-        document.documentElement.style.fontSize = 30 + "px";
+        // document.documentElement.style.fontSize = 30 + "px";
+        document.documentElement.style.setProperty("font-size",30 + "px","important");
       } else if (sqls[1].matches) {
         console.log(">415 & <=767"); // do something...
-        document.documentElement.style.fontSize = 40 + "px";
+        // document.documentElement.style.fontSize = 40 + "px";
+        document.documentElement.style.setProperty("font-size",40 + "px","important");
       } else if (sqls[3].matches) {
         console.log("> 767 & <=1024"); // do something...
-        document.documentElement.style.fontSize = 50 + "px";
+        // document.documentElement.style.fontSize = 50 + "px";
+        document.documentElement.style.setProperty("font-size",50 + "px","important");
       } else {
         console.log(">1200");
       }
@@ -238,6 +249,23 @@ export default {
     readNum: function() {
       return this.unReadWaitNum + this.unReadDialysisNum;
     }
+  },
+  watch:{
+    clientHeight(val){
+      // 为了避免频繁触发resize函数导致页面卡顿，使用定时器
+      if(!this.timer){
+        // 一旦监听到的screenWidth值改变，就将其重新赋给data里的screenWidth
+        this.clientHeight = val
+        this.timer = true
+        let that = this
+        setTimeout(function(){
+            // 打印screenWidth变化的值
+            console.log(that.clientHeight)
+            that.timer = false
+            that.mediaMatches();
+        },400)
+      }
+    }
   }
 };
 </script>