修改

package.json

@@ -17,6 +17,7 @@
     "babel-polyfill": "^6.26.0",
     "babel-polyfill": "^6.26.0",
     "core-js": "^2.6.5",
     "core-js": "^2.6.5",
     "cross-env": "^5.2.0",
     "cross-env": "^5.2.0",
+    "postcss-pxtorem": "^4.0.1",
     "qrcode": "^1.4.1",
     "qrcode": "^1.4.1",
     "register-service-worker": "^1.6.2",
     "register-service-worker": "^1.6.2",
     "uglifyjs-webpack-plugin": "^2.1.3",
     "uglifyjs-webpack-plugin": "^2.1.3",

postcss.config.js

 module.exports = {
 module.exports = {
   plugins: {
   plugins: {
-    autoprefixer: {}
+    autoprefixer: {},
+    'postcss-pxtorem': {
+      rootValue: 192.0,//136
+      propList: ['*']
+    }
   }
   }
 }
 }

src/App.vue

@@ -25,6 +25,7 @@ export default {
   margin: 0;
   margin: 0;
   padding: 0;
   padding: 0;
 }
 }
+ body,html{width: 100%;height:100%;overflow:hidden}
 #nav {
 #nav {
   padding: 30px;
   padding: 30px;
   a {
   a {

src/main.js

 import Vue from 'vue'
 import Vue from 'vue'
 import App from './App.vue'
 import App from './App.vue'
 import './registerServiceWorker'
 import './registerServiceWorker'
+import '@/utils/flexible'
 
 
 Vue.config.productionTip = false
 Vue.config.productionTip = false
 
 

src/utils/flexible.js

+(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
+  function setRemUnit () {
+    var rem = docEl.clientWidth / 10
+    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/Home.vue

@@ -204,12 +204,13 @@ export default {
   mounted() {
   mounted() {
     this.MAIN_INIT_QRCODE();
     this.MAIN_INIT_QRCODE();
     window.addEventListener("resize", () => {
     window.addEventListener("resize", () => {
-      console.log(window.innerWidth / 1920, window.innerWidth);
-      this.$refs["home"].style.zoom = window.innerWidth / 1920;
-      // this.$refs["home"].style.transform = `scale(${window.innerWidth / 1920})`;
+      // document.body.style.zoom = window.innerWidth / 1920;
+      // this.$refs["home"].style.zoom = window.innerWidth/1920;
     });
     });
-    this.$refs["home"].style.zoom = window.innerWidth / 1920;
-
+    // document.body.style.zoom = window.innerWidth / 1920;
+    // alert(window.innerWidth)
+    // alert(window.innerHeight)
+    //  this.$refs["home"].style.zoom = window.innerWidth/1920;
     // this.$refs["home"].style.transform = `scale(${window.innerWidth / 1920})`;
     // this.$refs["home"].style.transform = `scale(${window.innerWidth / 1920})`;
   },
   },
   created() {
   created() {
@@ -265,7 +266,6 @@ export default {
   overflow: hidden;
   overflow: hidden;
   position: relative;
   position: relative;
   perspective: 800px;
   perspective: 800px;
-  width: 100vw;
   .lunzi {
   .lunzi {
     width: 880px;
     width: 880px;
     height: auto;
     height: auto;