vue自适应布局（各种浏览器，分辨率）

Vue.js 自适应布局通常涉及到CSS的响应式设计。这可以通过CSS媒体查询来实现，也可以使用Vue.js的指令来动态调整样式。以下是一个简单的例子，展示如何使用Vue.js和CSS Media Queries来创建自适应布局。

<template>
  <div id="app">
    <div class="container">
      <h1>Vue.js 自适应布局示例</h1>
      <div v-bind:class="{'col-2': isLargeScreen, 'col-100': !isLargeScreen}"></div>
    </div>
  </div>
</template>
 
<script>
export default {
  name: 'App',
  data() {
    return {
      isLargeScreen: false
    };
  },
  created() {
    this.handleResize();
    window.addEventListener('resize', this.handleResize);
  },
  destroyed() {
    window.removeEventListener('resize', this.handleResize);
  },
  methods: {
    handleResize() {
      this.isLargeScreen = window.innerWidth > 768;
    }
  }
};
</script>
 
<style>
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
 
.col-2 {
  width: 200px;
  height: 100px;
  background-color: blue;
}
 
.col-100 {
  width: 100%;
  height: 50px;
  background-color: red;
}
 
/* 响应式布局 */
@media (max-width: 767px) {
  .col-2 {
    display: none;
  }
 
  .col-100 {
    width: 100%;
    height: 100px;
    background-color: green;
  }
}
</style>

在这个例子中，我们定义了.col-2和.col-100两个CSS类，分别用于大屏幕和小屏幕。然后通过媒体查询定义了在屏幕宽度小于768像素时的样式。在Vue.js组件的created生命周期钩子中，我们添加了handleResize方法来设置isLargeScreen数据属性，该属性根据当前屏幕宽度决定使用哪种样式类。当窗口大小变化时，我们通过监听resize事件来更新这个属性。这样就实现了一个简单的自适应布局。