vue实现页面自适应的常用4种方法

<template>
  <div class="container">
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
  </div>
</template>

<style>
.container {
  display: flex;
  flex-wrap: wrap;
}

.item {
  flex: 1 0 200px;
  margin: 10px;
}

@media (max-width: 600px) {
  .item {
    flex: 1 0 100%;
  }
}
</style>

<template>
  <div>
    <button @click="toggleLayout">Toggle Layout</button>
    <div v-if="isDesktopLayout" class="desktop-layout">
      <div class="item">Item 1</div>
      <div class="item">Item 2</div>
      <div class="item">Item 3</div>
    </div>
    <div v-else class="mobile-layout">
      <div class="item">Item 1</div>
      <div class="item">Item 2</div>
      <div class="item">Item 3</div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isDesktopLayout: true,
    };
  },
  methods: {
    toggleLayout() {
      this.isDesktopLayout = !this.isDesktopLayout;
    },
  },
};
</script>

<template>
  <div class="container">
    <div class="item" v-for="item in items" :key="item.id" :style="{ width: itemWidth + 'px' }">
      {{ item.content }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, content: 'Item 1' },
        { id: 2, content: 'Item 2' },
        { id: 3, content: 'Item 3' },
      ],
      itemWidth: 200,
    };
  },
  mounted() {
    this.updateLayout();
  },
  methods: {
    updateLayout() {
      const containerWidth = this.$el.offsetWidth;
      const itemCount = this.items.length;
      const itemWidth = containerWidth / itemCount;
      this.itemWidth = itemWidth;
    },
  },
};
</script>