我们开发过程中一般设计图的尺寸都是在1920*1080。
但是开发过程中，很多人用的分辨率配置是150%的，就是说浏览器的尺寸已经变成个1280*720
这个时候不仅仅开发遇到了滚动条的问题，同样要考虑到有的用户是1280*720那就左右都有滚动条的话，不美观，而且很多的响应式设计在转换过程中会出现元素布局混乱的现象，我有以下解决方案：思想就是自动缩放
假设我们开发的设计图是1920*1080的，那我们把#app设置自动缩放，缩放比例是scalseNum，代码如下
<template>
<div id="app" :style="{'transform':`scale(${scalseNum}) translate(-50%,0%)`,'-webkit-transform':`scale(${scalseNum}) translate(-50%,0%)`,'-moz-transform':`scale(${scalseNum}) translate(-50%,0%)`,'-o-transform':`scale(${scalseNum}) translate(-50%,0%)`,'-ms-transform':`scale(${scalseNum}) translate(-50%,0%)`}">
<router-view/>
</div>
</template>
<script>
export default {
name: 'App',
data () {
return {
scalseNum: 1 // 缩放比例
}
},
mounted () {
// 计算缩放比例
this.resize_window()
window.addEventListener('resize', () => {
this.resize_window()
})
},
methods: {
// 计算缩放比例
resize_window () {
let mywidth = document.documentElement.clientWidth
this.scalseNum = mywidth / 1920 // 因为设计图是带1920*1080的，但是浏览器本身带顶部工具栏，所以缩放到时候稍微更小一点，这样不会有滚动条，这个值可以选择更大些，比如2300，这样左右两边会有空白
}
}
}
</script>
<style lang="scss">
#app {
font-family:"PingFangSC-Medium,PingFang SC";
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
width:1920px;
transform-origin: 0 0;
padding-bottom:10px;
position:relative;
left:50%;
}
</style>
