为什么需要屏幕自适应
正常情况下,屏幕宽高为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缩放实现非标准屏幕自适应的方法,希望能帮到你。