Vue 中的响应式布局最佳实践

/* CSS媒体查询 */
@media (max-width: 768px) {
  .container {
    flex-direction: column;
  }
}
/* CSS Grid / Flexbox */
.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

<template>
  <div>
    <!-- 根据屏幕尺寸切换组件 -->
    <DesktopLayout v-if="!isMobile" />
    <MobileLayout v-else />
    <!-- 或使用动态组件 -->
    <component :is="currentLayout" />
  </div>
</template>
<script>
export default {
  data() {
    return {
      isMobile: false,
      windowWidth: window.innerWidth
    }
  },
  computed: {
    currentLayout() {
      return this.windowWidth < 768 ? 'MobileLayout' : 'DesktopLayout'
    }
  },
  mounted() {
    window.addEventListener('resize', this.handleResize)
  },
  methods: {
    handleResize() {
      this.windowWidth = window.innerWidth
      this.isMobile = this.windowWidth < 768
    }
  }
}
</script>

<template>
  <div :class="containerClasses">
    <!-- 内容 -->
  </div>
</template>
<script>
export default {
  data() {
    return {
      screenWidth: window.innerWidth
    }
  },
  computed: {
    containerClasses() {
      return {
        'mobile-layout': this.screenWidth < 768,
        'tablet-layout': this.screenWidth >= 768 && this.screenWidth < 1024,
        'desktop-layout': this.screenWidth >= 1024
      }
    }
  }
}
</script>

<!-- Element Plus / Vuetify / Ant Design Vue等 -->
<el-row :gutter="20">
  <el-col :xs="24" :sm="12" :md="8" :lg="6">
    <!-- 内容 -->
  </el-col>
</el-row>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
const screenWidth = ref(window.innerWidth)
const handleResize = () => {
  screenWidth.value = window.innerWidth
}
onMounted(() => {
  window.addEventListener('resize', handleResize)
})
onUnmounted(() => {
  window.removeEventListener('resize', handleResize)
})
// 响应式断点
const isMobile = computed(() => screenWidth.value < 768)
const isTablet = computed(() => screenWidth.value >= 768 && screenWidth.value < 1024)
</script>

// vue-use
import { useBreakpoints } from '@vueuse/core'
const breakpoints = useBreakpoints({
  mobile: 640,
  tablet: 768,
  desktop: 1024
})
const isMobile = breakpoints.smaller('tablet')

<template>
  <img 
    :srcset="`${smallImg} 320w, ${mediumImg} 768w, ${largeImg} 1200w`"
    sizes="(max-width: 320px) 280px,
           (max-width: 768px) 720px,
           1200px"
    :src="defaultImg"
    alt="响应式图片"
  />
</template>