vue实现浏览器不同分辨率下的不同样式，css的媒体查询与js判断当前浏览器宽度

在Vue中，可以通过CSS媒体查询来实现不同分辨率下的不同样式，同时结合JavaScript来动态调整样式。以下是一个简单的例子：

1. 在Vue组件的<style>标签中使用CSS媒体查询来定义不同分辨率下的样式规则：

/* 全屏样式 */
.fullscreen-style {
  /* 一些基础样式 */
}
 
/* 屏幕宽度小于600px时应用的样式 */
@media screen and (max-width: 600px) {
  .fullscreen-style {
    /* 小屏幕上的样式调整 */
  }
}
 
/* 屏幕宽度在600px到1200px之间时应用的样式 */
@media screen and (min-width: 600px) and (max-width: 1200px) {
  .fullscreen-style {
    /* 中屏幕上的样式调整 */
  }
}
 
/* 屏幕宽度大于1200px时应用的样式 */
@media screen and (min-width: 1200px) {
  .fullscreen-style {
    /* 大屏幕上的样式调整 */
  }
}

2. 使用JavaScript的window.innerWidth属性来获取当前浏览器的宽度，并根据宽度动态添加或移除类名：

export default {
  data() {
    return {
      currentBreakpoint: 'full' // 初始化为full以适应所有屏幕
    };
  },
  mounted() {
    this.updateBreakpoint();
    window.addEventListener('resize', this.updateBreakpoint);
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.updateBreakpoint);
  },
  methods: {
    updateBreakpoint() {
      const breakpoints = {
        full: 0,
        small: 600,
        medium: 1200
      };
      let newBreakpoint = 'full';
      for (const [key, value] of Object.entries(breakpoints)) {
        if (window.innerWidth < value) {
          newBreakpoint = key;
          break;
        }
      }
      this.currentBreakpoint = newBreakpoint;
    }
  }
};

在上面的Vue组件中，我们定义了三个断点：full、small和medium。在mounted生命周期钩子中，我们调用updateBreakpoint方法来设置初始断点，并监听resize事件以便在窗口大小变化时更新当前断点。在beforeDestroy生命周期钩子中，我们移除监听器以防止内存泄漏。

这样，Vue组件会根据当前浏览器的宽度动态应用对应的CSS样式。