数据大屏开发的适配-（scale、rem）

一、前言：

使用vue2开发, 默认设计稿的宽：1920px;  高：1080px;

(1) 使用rem方法

重要代码如下

1、在全局样式中的index.scss设置全局字体大小

body {
  font-size: 14px;
}

html {
  font-size: 14px;
}

#app {
  font-size: 16px;
}

2、在App.vue设置全局字体

<script>
export default {
  name: "index",
  data() {
    return {
    };
  },
  mounted(){
    // 初始化设置
    this.pageResize()
    window.addEventListener('resize', this.pageResize())
  },
  beforeDestroy() {  
    // 在组件销毁前移除事件监听器
    window.removeEventListener("resize", this.pageResize);  
  },
  methods: {
     //页面字体自适应方法
      pageResize() {
        this.$nextTick(() => {
            // 页面开始加载时修改font-size
            const html = document.getElementsByTagName('html')[0]
            const oWidth =
              document.body.clientWidth || document.documentElement.clientWidth
            // 这里的1920是指设计图的大小,自己根据实际情况改变
            html.style.fontSize = (oWidth / 1920) * 100 + 'px'
          })
        }
  }
};
</script>

(2) 使用scale方法

重要代码如下：

<template>
    <div class="dataScreen-content" ref="dataScreenRef"></div>
</template>

export default {
  name: "dataScreen",
  data() {
    return {
      dataScreenRef: null,
    };
  },
  mounted(){
    if (this.$refs.dataScreenRef) {  
      this.$refs.dataScreenRef.style.transform = `scale(${this.getScale().ww},${this.getScale().wh}) translate(-50%, -50%)`;  
      this.$refs.dataScreenRef.style.width = '1920px';  
      this.$refs.dataScreenRef.style.height = '1080px';  
    }  
    window.addEventListener('resize', this.resize);
 },
  beforeDestroy() {  
    // 如果之前添加了窗口大小变化的事件监听器，这里也需要移除  
    window.removeEventListener("resize", this.resize);  
  },
  methods: {
    // 设置响应式
    resize() {  
      // 窗口大小变化时的处理逻辑  
      if (this.$refs.dataScreenRef) {  
        this.$refs.dataScreenRef.style.transform = `scale(${this.getScale().ww},${this.getScale().wh}) translate(-50%, -50%)`;  
      } 
    }, 
    // 根据浏览器大小推断缩放比例
    getScale(width = 1920, height = 1080) {  
      let ww = window.innerWidth / width;  
      let wh = window.innerHeight / height;  
      // return ww < wh ? ww : wh;  
      return { ww, wh };
    },  
  }
};

 若用vue3开发，借鉴Geeker-Admin: ✨✨✨ Geeker Admin，基于 Vue3.4、TypeScript、Vite5、Pinia、Element-Plus 开源的一套后台管理框架。