1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

<template>

    <div>

        <scale-box :width="1920" :height="1080" bgc="transparent" :delay="100">

            <router-view />

        </scale-box>

    </div>

</template>

<script>

import ScaleBox from "vue2-scale-box";

export default {

    components: { ScaleBox },

};

</script>

<style lang="scss">

body {

    margin: 0;

    padding: 0;

    background: url("@/assets/bg.jpg");

}

</style>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

<template>

    <ScaleBox :width="1920" :height="1080" bgc="transparent" :delay="100">

        <router-view />

    </ScaleBox>

</template>

<script>

import ScaleBox from "vue3-scale-box";

</script>

<style lang="scss">

body {

    margin: 0;

    padding: 0;

    background: url("@/assets/bg.jpg");

}

</style>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

class devicePixelRatio {

  /* 获取系统类型 */

  getSystem() {

    const agent = navigator.userAgent.toLowerCase();

    const isMac = /macintosh|mac os x/i.test(navigator.userAgent);

    if (isMac) return false;

    // 目前只针对 win 处理，其它系统暂无该情况，需要则继续在此添加即可

    if (agent.indexOf("windows") >= 0) return true;

  }

  /* 监听方法兼容写法 */

  addHandler(element, type, handler) {

    if (element.addEventListener) {

      element.addEventListener(type, handler, false);

    } else if (element.attachEvent) {

      element.attachEvent("on" + type, handler);

    } else {

      element["on" + type] = handler;

    }

  }

  /* 校正浏览器缩放比例 */

  correct() {

    // 页面devicePixelRatio（设备像素比例）变化后，计算页面body标签zoom修改其大小，来抵消devicePixelRatio带来的变化

    document.getElementsByTagName("body")[0].style.zoom =

      1 / window.devicePixelRatio;

  }

  /* 监听页面缩放 */

  watch() {

    const that = this;

    // 注意: 这个方法是解决全局有两个window.resize

    that.addHandler(window, "resize", function () {

      that.correct(); // 重新校正浏览器缩放比例

    });

  }

  /* 初始化页面比例 */

  init() {

    const that = this;

    // 判断设备，只在 win 系统下校正浏览器缩放比例

    if (that.getSystem()) {

      that.correct(); // 校正浏览器缩放比例

      that.watch(); // 监听页面缩放

    }

  }

}

export default devicePixelRatio;

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

<template>

  <div>

    <router-view />

  </div>

</template>

<script>

import devPixelRatio from "@/utils/devicePixelRatio.js";

export default {

  created() {

    new devPixelRatio().init(); // 初始化页面比例

  },

};

</script>

<style lang="scss">

body {

  margin: 0;

  padding: 0;

}

</style>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

export const monitorZoom = () => {

  let ratio = 0,

    screen = window.screen,

    ua = navigator.userAgent.toLowerCase();

  if (window.devicePixelRatio !== undefined) {

    ratio = window.devicePixelRatio;

  } else if (~ua.indexOf("msie")) {

    if (screen.deviceXDPI && screen.logicalXDPI) {

      ratio = screen.deviceXDPI / screen.logicalXDPI;

    }

  } else if (

    window.outerWidth !== undefined &&

    window.innerWidth !== undefined

  ) {

    ratio = window.outerWidth / window.innerWidth;

  }

  if (ratio) {

    ratio = Math.round(ratio * 100);

  }

  return ratio;

};

1

2

3

4

5

6

7

import { monitorZoom } from "@/utils/monitorZoom.js";

const m = monitorZoom();

if (window.screen.width * window.devicePixelRatio >= 3840) {

  document.body.style.zoom = 100 / (Number(m) / 2); // 屏幕为 4k 时

} else {

  document.body.style.zoom = 100 / Number(m);

}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

import Vue from "vue";

import App from "./App.vue";

import router from "./router";

/* 调整缩放比例 start */

import { monitorZoom } from "@/utils/monitorZoom.js";

const m = monitorZoom();

if (window.screen.width * window.devicePixelRatio >= 3840) {

  document.body.style.zoom = 100 / (Number(m) / 2); // 屏幕为 4k 时

} else {

  document.body.style.zoom = 100 / Number(m);

}

/* 调整缩放比例 end */

Vue.config.productionTip = false;

new Vue({

  router,

  render: (h) => h(App),

}).$mount("#app");

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

module.exports = {

  plugins: {

    autoprefixer: {}, // 用来给不同的浏览器自动添加相应前缀，如-webkit-，-moz-等等

    "postcss-px-to-viewport": {

      unitToConvert: "px", // 需要转换的单位，默认为"px"

      viewportWidth: 390, // UI设计稿的宽度

      unitPrecision: 6, // 转换后的精度，即小数点位数

      propList: ["*"], // 指定转换的css属性的单位，*代表全部css属性的单位都进行转换

      viewportUnit: "vw", // 指定需要转换成的视窗单位，默认vw

      fontViewportUnit: "vw", // 指定字体需要转换成的视窗单位，默认vw

      selectorBlackList: ["wrap"], // 需要忽略的CSS选择器，不会转为视口单位，使用原有的px等单位

      minPixelValue: 1, // 默认值1，小于或等于1px则不进行转换

      mediaQuery: false, // 是否在媒体查询的css代码中也进行转换，默认false

      replace: true, // 是否直接更换属性值，而不添加备用属性

      exclude: [/node_modules/], // 忽略某些文件夹下的文件或特定文件，用正则做目录名匹配，例如 'node_modules' 下的文件

      landscape: false, // 是否处理横屏情况

      landscapeUnit: "vw", // 横屏时使用的视窗单位，默认vw

      landscapeWidth: 2048 // 横屏时使用的视口宽度

    }

  }

};