在app.vue中进行出来:
<template>
<div id="app"
:style="{'transform':`scale(${scalesNum}) translate(-50%,0)`,
'-webkit-transform':`scale(${scalesNum}) translate(-50%,0)`,
'-moz-transform':`scale(${scalesNum}) translate(-50%,0)`,
'-o-transform':`scale(${scalesNum}) translate(-50%,0)`,
'-ms-transform':`scale(${scalesNum}) translate(-50%,0)`}">
<router-view/>
</div>
</template>
<script>
export default{
data () {
return {
scalesNum: 1 // 缩放比例
}
},
mounted () {
// 计算缩放比例
this.resize_window()
window.addEventListener('resize', () => {
this.resize_window()
})
},
methods: {
resize_window() {// 因为设计图是带1920*1080的,但是浏览器本身带顶部工具栏,所以缩放到时候稍微更小一点,这样不会有滚动条,这个值可以选择更大些,比如2300,这样左右两边会有空白
let myWidth = document.documentElement.clientWidth
let myHeight = document.documentElement.clientHeight
if( myHeight / 1920 !== 0 && (( myWidth / 1920) / (myHeight / 1080) >= 1)){
console.log()
this.scalesNum = myHeight / 1080
}else{
this.scalesNum = myWidth / 1920
}
}
}
}
</script>
<style>
#app{
margin: 0;
padding: 0;
transform-origin: 0 0;
position:relative;
width:1920px;
height: 1080px;
left:50%;
overflow: hidden;
}
</style>
可以在不同的分辨率下都能够一屏展示,不会有滚动条的问题,也不会有适配问题。但是会导致浏览器的缩放功能失效。