使用scale实现屏幕自适应

为什么需要屏幕自适应

正常情况下，屏幕宽高为1920 * 1080，但是，在实际项目开发中，由于设备的多样性，屏幕规格不一定会是标准的1920 * 1080，所以就需要前端去适应非标准的屏幕，例如2100 * 840、1720 * 1180的非标准屏幕。

如何实现屏幕自适应

1、使用element-resize-detector组件

使用npm引如element-resize-detector组件

npm install element-resize-detector --save

2、定义一个工具类

定义一个公用的工具类resize.js

import elementResizeDector from 'element-resize-detector';
const erd = elementResizeDector();
const resizeStack = erd;
export default {
    bind(el,binding){
        el._handleResize = function(el){
            binding.value({
                el: el,
                width: el.offsetWidth,
                height: el.offsetHeight
            });
        };
        erd.listenTo(el, el._handleResize);
    },
    unbind(el){
        erd.removeListener(el, el._handleResize);
    }
};
export {
    resizeStack
};

3、将文件注册为自定义指令

在main.js中注册成自定义指令

import resize from "@/utils/resize"
Vue.directive('resize', resize);

4、主页面文件中使用

<template>
	//在页面外面套一层，使用scale实现自适应
	<div class="outer" v-resize="handleResize">
		//主页面
		<div class="page-screen" :style="{transform: tran}">
		</div>
	</div>
</template>

<script>
data(){
	return: {
		tran: '',
		width: 0,
		height: 0,
	}
},
methods: {
	handleResize({ width, height }) {
      this.width = width;
      this.height = height;
      this.tran = `scale(${this.width / 2100},${this.height / 840})`;
    },

}
</script>

以上就是利用scale缩放实现非标准屏幕自适应的方法，希望能帮到你。