生成一个vue代码，里面很多div盒子，盒子宽高200px，随着浏览器页面的变小，盒子也随之变小，盒子之间的外边距是20px,缩小的时候盒子边距不能变化

可以使用CSS中的flex布局和媒体查询来实现这个效果。

首先，我们需要定义一个容器，用于包含所有的div盒子。这个容器设置为flex布局，并且设置flex-wrap为wrap，这样当浏览器宽度不足时，盒子会自动换行。

然后，我们定义每个div盒子的样式，包括宽度、高度、外边距等。为了实现缩小时盒子大小不变，我们可以使用vw单位来设置宽度和外边距，这样它们会随着浏览器宽度的变化而自动调整。

最后，我们使用@media查询来检测浏览器宽度是否小于某个值，如果是，则缩小每个盒子的大小，同时保持外边距不变。

下面是代码示例：

HTML代码：

<div class="container">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <<div class="box"></div>
  <div class="box"></div>
</div>

CSS代码：

.container {
  display: flex;
  flex-wrap: wrap;
}

.box {
  width: 200px;
  height: 200px;
  margin: 20px;
  background-color: #ccc;
}

@media (max-width: 800px) {
  .box {
    width: 30vw;
    height: 30vw;
  }
}

在上面的代码中，当浏览器宽度小于800px时，每个盒子的宽度和高度会变为浏览器宽度的30%，即30vw，同时保持外边距不变。