vue分辨率自适应不同版本的分辨率排雷和出错

在Vue中实现分辨率自适应，通常涉及到样式和组件布局的调整。以下是一个简单的例子，展示如何使用CSS媒体查询来适配不同分辨率的屏幕。

<template>
  <div id="app">
    <header>头部</header>
    <main>
      <sidebar v-if="isSidebarVisible">侧边栏</sidebar>
      <content>内容</content>
    </main>
    <footer>底部</footer>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      isSidebarVisible: true
    };
  },
  created() {
    // 监听窗口大小变化
    window.addEventListener('resize', this.handleResize);
    this.handleResize(); // 初始化时检查
  },
  destroyed() {
    // 清理监听器
    window.removeEventListener('resize', this.handleResize);
  },
  methods: {
    handleResize() {
      // 根据窗口宽度判断侧边栏是否显示
      this.isSidebarVisible = window.innerWidth > 1024;
    }
  }
};
</script>
 
<style lang="scss">
@media screen and (max-width: 1024px) {
  #app main {
    flex-direction: column;
 
    sidebar {
      display: none; // 小于1024px时隐藏侧边栏
    }
  }
}
 
@media screen and (min-width: 1025px) {
  #app main {
    display: flex;
 
    sidebar {
      width: 200px; // 大于1024px时显示侧边栏，并设置宽度
    }
    content {
      flex-grow: 1;
    }
  }
}
 
// 其他样式规则...
</style>

在这个例子中，我们使用了Vue的生命周期钩子来监听窗口大小的变化，并据此设置isSidebarVisible的值。在样式部分，我们使用了CSS媒体查询来根据屏幕宽度决定是否显示侧边栏以及它们的布局。这样，应用就可以在不同分辨率的设备上提供良好的自适应体验。