Vue css全局自适应

要在Vue中实现CSS的全局自适应，通常需要根据屏幕大小动态调整样式。可以使用CSS媒体查询或Vue的响应式布局特性来实现。

以下是一个简单的例子，使用Vue的响应式布局来实现全局自适应：

1. 使用Vue的v-bind或:style来动态绑定样式。
2. 使用Vue的data属性或计算属性来根据屏幕宽度计算样式。

<template>
  <div id="app">
    <div :style="responsiveStyles">
      全局自适应内容
    </div>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      baseFontSize: 16
    };
  },
  computed: {
    responsiveStyles() {
      // 获取屏幕宽度
      const screenWidth = window.innerWidth;
      // 基于屏幕宽度计算字体大小
      const fontSize = (screenWidth / 1920) * this.baseFontSize;
      return {
        'font-size': fontSize + 'px'
      };
    }
  },
  mounted() {
    window.addEventListener('resize', this.handleResize);
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.handleResize);
  },
  methods: {
    handleResize() {
      this.$forceUpdate(); // 强制Vue重新渲染组件
    }
  }
};
</script>
 
<style>
/* 全局样式 */
body, html {
  margin: 0;
  padding: 0;
}
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
</style>

在这个例子中，我们定义了一个基础的字体大小baseFontSize，然后通过计算属性responsiveStyles动态计算出字体大小。屏幕宽度变化时，我们通过监听resize事件来强制Vue重新渲染组件。CSS部分定义了全局样式，确保整个应用有一个基本的样式框架。

这个例子提供了一个简单的方法来实现Vue中的全局自适应，但实际项目中可能需要更复杂的响应式布局策略来处理不同组件和场景。