vue适配各个屏幕

1:不是响应式，只是用缩放来适配各个pc

2：使用中会出现由于 transform  属性导致的定位问题，具体的需要针对性的处理

App.vue

<div id="app" ><div class="app-view" :style="{'--scale':scale}"><div class="position-relative w-100"><router-view /><theme-picker /></div></div><login-index-view></login-index-view><sing-view></sing-view><wx-login></wx-login>
</div>

3:从上述代码中可以看出，我在App.vue中多添加了几行用来包裹 router-view，那是因为问题2导致的，我需要将页面的定位进行一次重新的指向

缩放的方法

data() {return {scale: window.innerWidth / 1920}},mounted() {window.addEventListener('resize', this.resize)},methods: {resize() {this.scale = window.innerWidth / 1920;}}

css部分 

<style scoped>#app {width: 1920px;}.app-view{transform: scale(var(--scale));transform-origin: left top;}#app .theme-picker {display: none;}
</style>

固定导航栏部分（可不必，整个缩放在上面，如果你不需要做固定导航栏，可在原有的app.vue id="app"这个div上面加缩放，就不需要套那么多层了，如果涉及到全局的弹窗登录就必须做多层，不然就会出现2的问题） 

4：由于顶部导航栏是做了固定在上面的

<template><div :class="classObj" class="app-wrapper" :style="{'--current-color': theme}"><div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside"/><div :class="{hasTagsView:needTagsView,sidebarHide:sidebar.hide}" class="main-container"><!-- 导航栏 --><div :class="{'fixed-header':fixedHeader}"><navbar/></div><app-main/><my-footer/></div></div>
</template>.fixed-header {position: sticky;//本来是固定定位的，由于上面缩放的问题不得已改动top: 0;right: 0;z-index: 999;width: 100%;// width: calc(100% - #{$base-sidebar-width});transition: width 0.28s;}

一开始是使用固定布局，由于加了缩放的原因导致固定布局失效了

所以将固定布局改为粘性布局即可

如果有其他问题自己可进行修改，有更好的方法可留言评论