设置系统缩放比，适配各分辨率

【记录】
在store里设置state 添加zoomRatio

import store from '../store'
// 设置系统缩放比，适配各分辨率
export function refreshScale() {
  //当前屏幕宽高
    let baseWidth = document.documentElement.clientWidth;
    let baseHeight = document.documentElement.clientHeight;
    // 最大时即正常时宽高
    let MaxHeight = 1080
    let MaxWidth = 1920
    // console.log(baseWidth,baseHeight); // 1920 937 缩放比zoomRatio
    store.state.zoomRatio = baseHeight / MaxHeight
    store.state.zoomRatioW = baseWidth / MaxWidth

}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

该缩放方法不能搭配百分比使用，且要设置transform-origin:top center"设置中心点

import {mapState} from 'vuex'
 computed:{
    ...mapState(['zoomRatio'])
  },
1
2
3
4

》》
》》
》》

利用transform:scale()缩放适应不用分辨率

 <div class="right_inner" :style="{transform:'scale('+zoomRatio+')'}">
        <component :is="left_show_content" ref="comp" class="comp" ></component>
      </div>



import {mapState} from "vuex";
...mapState(['zoomRatio']),
1
2
3
4
5
6
7
8