vue页面自适应屏幕大小

在 Vue 中实现页面自适应屏幕大小可以通过以下几种方式：

1. 使用 CSS3 媒体查询。通过设置不同的 CSS 样式来适应不同的屏幕大小。

2. 使用第三方 CSS 框架，例如 Bootstrap 或 Foundation。这些框架已经实现了自适应的功能，可以直接使用。

3. 使用 Vue.js 组件库，例如 Element UI 或 Vuetify。这些组件库提供了一些自适应的组件，可以方便地实现页面自适应。

4. 使用 JavaScript 动态计算样式。通过监听窗口大小变化事件，动态计算样式，实现自适应效果。

例如，使用 CSS3 媒体查询实现自适应：

<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 {
  width: 100%;
}

@media screen and (min-width: 768px) {
  .item {
    width: 50%;
  }
}

@media screen and (min-width: 992px) {
  .item {
    width: 33.33%;
  }
}
</style>

在上面的例子中，通过设置不同的媒体查询样式，实现了在不同的屏幕大小下，展示不同的布局效果。