vue2项目中适配等比例缩放

今天吃了嘛o

已于 2024-08-29 14:51:41 修改

阅读量255

点赞数 1

文章标签： vue.js css 前端

于 2024-08-29 14:51:10 首次发布

本文链接：https://blog.csdn.net/weixin_45535843/article/details/141678746

版权

export default {
  name: "HomePage",
  data() {
    return {};
  },
  methods: {
    bodyScale() {
      let devicewidth = document.documentElement.clientWidth; //获取当前分辨率下的可是区域宽度
      let scale = devicewidth / 1366; // 分母——设计稿的尺寸
      document.body.style.zoom = scale; //放大缩小相应倍数
    },
  },
  mounted() {
    this.bodyScale();
    window.onresize = () => {
      return (() => {
        this.bodyScale();
      })();
    };
  },
};

以上实在App.vue中加入的代码，可更改设计稿尺寸。
这样的话就可以不管放大缩小都可以等比例缩放。