vue3的页面缩放问题

想请问下，我这些大小都设置好了，页面以缩放就会出现图一那样，所有图表都挤在一起了，这应该怎么改呀？要改的话是不是所有的宽高设置那些的都要改？
需要什么方法改？

img

img

出现这种情况一般是太多地方用了百分比宽度，一个一个改确实能解决问题，不过最偷懒的办法还是直接给body设置一个最小宽度，在.body那个类里面添加一个属性： min-width: 1000px;，这样无论页面怎么缩放body的最小宽度都是1000px

最简单的办法，不准缩放，缩放就出现滚动条，设置整体最小宽度

rem布局，或者 css的缩放

不知道你这个问题是否已经解决, 如果还没有解决的话:
  • 你可以参考下这个问题的回答, 看看是否对你有帮助, 链接: https://ask.csdn.net/questions/7501947
  • 你也可以参考下这篇文章：vue公共组件的某部分通过路由的改变显示与隐藏，组件内路由守卫的使用控制两个专属路由之间的数据交互
  • 除此之外, 这篇博客: Vue3之响应式中的 1.3 如果一个普通对象的某个深层属性也是对象或数组，这个普通对象在生成响应式对象时，这个普通对象的深层对象或数组响应式的吗？ 部分也许能够解决你的问题, 你可以仔细阅读以下内容或者直接跳转源博客中阅读:

    reactive()创建的响应式对象都是深层的，深层对象或数组也是响应式的，他们的改变都能被监测到。响应式对象内的对象依然是代理。

    <template>
<!-- 直接使用state.count -->
<div>当前的值：{{state.count}}</div>
<div>当前的值：{{state.taskInfo.status}}</div>
</template>

<script setup>

import {reactive} from "vue";

const state = reactive({count:0,taskInfo:{status:"未开始"}});

state.taskInfo= {status:"暂停中"};//赋值新对象后，state.taskInfo属性还是响应式的

setTimeout(()=>{
  state.count +=1;
  state.taskInfo.status ="进行中";
},5000)

</script>

如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^