vue eachert 自适应大小

为了使 Vue 组件适应不同的大小，可以使用 CSS 中的响应式布局和 Flexbox。下面是一些常用的方法：

1. 响应式布局：利用媒体查询（media queries）来根据不同的屏幕大小设置组件的样式。通过 @media 规则，可以根据屏幕宽度等条件来定义不同的样式。

/* 定义在小屏幕上显示一列，在大屏幕上显示两列的样式 */
@media screen and (max-width: 768px) {
  .component {
    /* 设置样式 */
  }
}

@media screen and (min-width: 769px) {
  .component {
    /* 设置样式 */
  }
}

2. Flexbox：使用 Flexbox 可以轻松地创建响应式的布局。通过设置容器的 `display: flex`，可以将子元素自动调整为一行或一列，同时使用 `flex-grow` 和 `flex-shrink` 属性来定义宽度和高度的伸缩性。

<div class="container">
  <div class="component">Component 1</div>
  <div class="component">Component 2</div>
</div>

.container {
  display: flex;
  flex-wrap: wrap; /* 如果组件超出容器宽度，则换行显示 */
}

.component {
  flex-grow: 1; /* 组件的宽度伸缩性 */
  flex-shrink: 1; /* 组件的宽度收缩性 */
  /* 设置样式 */
}

这样，当容器宽度变化时，组件会根据空间自动调整大小。

以上是一些常用的方法，根据具体情况选择适合的方式。希望能对你有所帮助！