VUE大屏适配

最新推荐文章于 2024-03-20 11:33:11 发布

范同学~

最新推荐文章于 2024-03-20 11:33:11 发布

阅读量348

点赞数 1

文章标签： vue.js 前端 javascript Powered by 金山文档

本文链接：https://blog.csdn.net/weixin_46041322/article/details/128673519

版权

App.vue文件

<template>
  <div id="app">
    <router-view />
  </div>
</template>
export default {
  name: "APP",
  data() {
    return {};
  },
  created() {
    this.windowResize();
  },
  mounted() {},
  methods: {
    windowResize() {
      //屏幕分辨率为1920*1080
      const loadFull = () => {
        let width = window.innerWidth / 1920;
        let height = window.innerHeight / 1080;
        document.body.style.cssText = `transform:scale(${width},${height});transform-origin:left top;background-size: 100% 100%;`;
      };
      loadFull();
      window.addEventListener("resize", loadFull);
    }
  }
};

<style>
html {
  width: 100vw;
  height: 100vh;
  background-size: 100% 100%;
}
body {
  /* overflow: hidden; */
  width: 1920px;
  height: 1080px;
  background-size: 100% 100%;
}
#app {
  width: 100%;
  height: 100%;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
  width: 0;
  height: 0;
}
</style>