vue中css实现炫酷多屏实现效果demo

Vue 中的 CSS 实现炫酷多屏适配效果通常通过 CSS 框架如 Vue-CSS-Spins 或者使用媒体查询（Media Queries）结合响应式设计来完成。下面是一个简单的例子，展示如何使用 CSS 和 Vue 的绑定机制创建一个基于屏幕大小改变显示内容的组件：

首先，创建一个名为 `ResponsiveDemo.vue` 的 Vue 组件文件：

<template>
  <div class="responsive-demo">
    <button @click="showContent = !showContent">切换内容</button>
    <div v-if="showContent">
      <p>{{ messageForScreen(width) }}</p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showContent: true,
    };
  },
  computed: {
    width() {
      // 获取当前屏幕宽度
      return window.innerWidth;
    },
  },
  methods: {
    messageForScreen(size) {
      if (size <= 600) {
        return "这是手机端的内容";
      } else if (size <= 900) {
        return "这是平板电脑端的内容";
      } else {
        return "这是桌面端的内容";
      }
    },
  },
};
</script>

<style scoped>
.responsive-demo {
  display: flex;
}

@media screen and (max-width: 600px) {
  .responsive-demo {
    justify-content: center;
  }
}
</style>

在这个示例中，我们监听窗口的宽度变化，并根据不同的屏幕尺寸动态地渲染不同的消息。当屏幕宽度小于等于 600px 时，显示手机端的消息；介于 600px 到 900px 之间显示平板电脑的消息；大于 900px 时显示桌面端的消息。