Vue页面布局-自动缩放

util.js

import constant from "./constant";
export default {
    zoom() {
        let x = window.innerWidth / constant.constant.PAGE_WIDTH;
        let y = window.innerHeight / constant.constant.PAGE_HEIGHT;
        let oBody = document.getElementsByTagName('body')[0];
        oBody.style.transform = `scale(${x}, ${y})`;
        oBody.style.webkitTransform = `scale(${x}, ${y})`;/* for Chrome || Safari */
        oBody.style.msTransform = `scale(${x}, ${y})`;/* for Firefox */
        oBody.style.mozTransform = `scale(${x}, ${y})`;/* for IE */
        oBody.style.oTransform = `scale(${x}, ${y})`;/* for Opera */     
    }
};

constant.js

export default {
    constant: {
        PAGE_WIDTH: 2048,
        PAGE_HEIGHT: 1038
    }
};

App.vue中设置html、body的边距和缩放基本点

html, body {
  margin: 0;
  padding: 0;
  width: 2048px;
  height: 1038px;
  min-width: 960px;
  transform-origin: 0 0 0;       /*指定缩放的基本点*/
  -moz-transform-origin: 0 0 0;
  -ms-transform-origin: 0 0 0;
  -webkit-transform-origin: 0 0 0;
  -o-transform-origin: 0 0 0;
  overflow: hidden;
}

main.js

import util from "./assets/js/util.js";
util.zoom();
window.onresize = () => {
  util.zoom();
};