简单方法Transform等比缩放解决大屏展示屏幕分辨率的问题

一、为什么不用rem？

rem方案固然好，但是我司项目中的业务场景是某个页面大屏展示，rem尺寸相对于html根元素的字体大小来显示的，使用rem方案在同一个项目中不可避免的会影响到其他页面的样式。

二、使用transform

1.transform用法

transform用法，点击去菜鸟教程查看

2.项目中使用

代码如下（vue示例）：

<template>
  <div v-loading="loading"
    :style="{
      'transformOrigin':'center top',
      'transform':`scale(${rate},${rate})`,
      '-webkit-transform':`scale(${rate},${rate})`,
      '-moz-transform':`scale(${rate},${rate})`,
      '-o-transform':`scale(${rate},${rate})`,
      '-ms-transform':`scale(${rate},${rate})`
    }"
    class="divContainer"
    element-loading-text="拼命加载中"
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.8)">
    这里是展示内容位置
  </div>
</template>

data(){
return{
	rate:1
   }
},
mounted() {
    this.resize_window()
    window.addEventListener('resize', () => {
      this.resize_window()
    })
  },
destroyed() {
  window.removeEventListener('resize', () => {
    this.resize_window()
  })
},
methods: {
	//在这里发送页面的请求获取大屏展示的数据
    async initialize() {
      try {
        this.loading = true
        this.$emit('pageLoading', true)
      } catch (err) {
        console.log(err)
      } finally {
        setTimeout(() => {
          this.loading = false
          this.$emit('pageLoading', false)
        }, 3000)
      }
    },
    resize_window() {
      const heightRatio = Number(document.documentElement.clientHeight / 1080)
      const widthRatio = Number(document.documentElement.clientWidth / 1920)
      var ratio= document.documentElement.clientWidth /document.documentElement.clientHeight
      if (ratio< 1920 / 1080) {
        this.rate= widthRatio 
      } else {
        this.rate= heightRatio 
      }
    }
  }

页面完成等比缩放以后，由于比例问题，页面两边难免出现留白的情况，此时应当设置整个页面的背景来取代空白处，做到缩放也不影响页面的整体布局。

代码如下（vue示例）App.vue：

<template>
  <div id="app">
  	<!-- 需要定义在路由中pageFull给页面加上整体的背景色，并且对页面loading时候不一致状况做出处理 -->
    <div :class="{'page-full':true,'loading':loading}"  v-if="$route.meta.pageFull">
    	<router-view @pageLoading="pageLoading" />
    </div>
    <router-view v-else />
  </div>
</template>

<script>
export default {
  name: 'App',
  components: { BackTop },
  data() {
    return {
      loading: false
    }
  },
  methods: {
  	//页面中的loading通知根节点的简单实现方式
    pageLoading(val) {
      this.loading = val
    }
  }
}
</script>

<style>
body {
  margin: 0;
  padding: 0;
}
#app {
  font-family: 'Microsoft YaHei', Arial;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-width: 1200px;
}
/* 根节点注意样式的穿透问题 */
.page-full {
  background-color: #050f43;/* 当然，使用背景图片会更加美观 */
  justify-content: center;
  display: flex;
  box-sizing: border-box;
}
.loading {
  background-color: #01030d;/* 这里设置页面loading时候的背景色 */
}
</style>