关于大屏展示自适应的处理

最新推荐文章于 2024-07-21 14:16:06 发布

酸菜鱼很好吃哦1

最新推荐文章于 2024-07-21 14:16:06 发布

阅读量368

点赞数

文章标签：前端 vue.js javascript html

本文链接：https://blog.csdn.net/m0_50663823/article/details/125737212

版权

原理：使用固定宽高(一般是16:9)的宽高比

然后使用缩放函数做自适应

放代码：

 mounted() {
    
  var setScale = (() => {
    const designWidth = 1920;
    const designHeight = 1080;
    const getBodyBaseStyle = `width: 1920; height: 1080; transform-origin: left top; overflow-x:hidden;`;
    return () => {
      const { innerWidth, innerHeight } = window;
      const scale = innerWidth / designWidth;
      document.body.style = `${getBodyBaseStyle}transform: scale(${scale})`;
    };
  })()

  window.addEventListener("load", () => {
    setScale();
    setTimeout(() => {
      document.body.style.setProperty("visibility", "visible");
    }, 0);
  })

  window.addEventListener("resize", () => {
    setScale();
  })

    // 获取公司+部门
      getDepartmentSelector().then(res => {
        this.departmentTreeData = res.data.list
      })

    setScale()
  },
  

  destroyed(){
    window.removeEventListener("load")
    window.removeEventListener("resize")
  },