我有这样的代码（在小提琴中，圆圈重叠，但它在我的PC上工作正常-很可能是由于小提琴中的像素宽度关闭？）：https://codesandbox.io/s/objective-hamilton-zspre8?file=/src/App.vue

TestCircle.vue：

<template>
  <div class="circle" :style="{left: this.left,
                 top: this.top}">
    {{value}}
  </div>
</template>

<script>
export default {
name: "TestCircle",

props:  {
  value: String,
  left: Number,
  top: Number
}
}
</script>

<style scoped>
  .circle  {
    background-color: red;

    min-height: 49px;
    height: 49px;

    min-width: 49px;
    width: 49px;

    border-radius: 20em;
    display: inline;
    padding: 1em;
    position: absolute;

    border: 1px solid black;

  }
</style>

TestComponent.vue：

<template>
  <div id="wrapper" ref="wrapper">

    <TestCircle v-for="(circle, i) in this.circles.length"
                 :value = this.circles[i] :key="i"
                :left="this.coordinates[i].left"
                :top="this.coordinates[i].top"

    />

  </div>
</template>

<script>
import TestCircle from "@/app/test/TestCircle";

export default {
  name: "TestComponent",
  components: {TestCircle},
  data() {
    return {
      circles: ['A', 'B', 'C', 'D', 'E', 'F'],
      coordinates: []
    }
  },

    created() {
    console.log("circles: " + this.circles);

    let wrapperWidth = 500;
    let wrapperHeight = 100;

    let circleWidth = 50;
    let circleHeight = 50;

    for (let i = 0; i < this.circles.length; i++) {
      let circleCoordinates = {};

      let isValid = false;
      do {
        isValid = false;

        circleCoordinates.left = (this.randomInRange(0, wrapperWidth - circleWidth)).toString() + 'px';
        circleCoordinates.top = (this.randomInRange(0, wrapperHeight - circleHeight)).toString() + 'px';
        circleCoordinates.width = 50;
        circleCoordinates.height = 50;

        isValid = !this.overlaps(this.coordinates, i, circleCoordinates);
      } while (!isValid);

      this.coordinates.push(circleCoordinates);
    }
  },

  methods: {
    randomInRange: function(min, max)  {
      return Math.random() * (max - min + 1) + min;
    },

    overlaps(coordinates, size, rectangle)  {
      // Loop through all the rectangles in the coordinates array
      for (let i = 0; i < size; i++) {
        // Create a rectangle object for the other rectangle

        // Check whether the two rectangles overlap using the rectanglesOverlap function
        if (this.rectanglesOverlap(rectangle, coordinates[i])) {
          return true;
        }
      }

      // None of the rectangles overlap
      return false;
    },

    rectanglesOverlap(first, second) {
      console.log("rectanglesOverlap: " + JSON.stringify(first)
          + " and "+ JSON.stringify(second));

      // Determine the coordinates of the edges of both rectangles
      const firstLeft = parseFloat(first.left);
      const firstRight = firstLeft + first.width;
      const firstTop = parseFloat(first.top);
      const firstBottom = firstTop + first.height;

      const secondLeft = parseFloat(second.left);
      const secondRight = secondLeft + second.width;
      const secondTop = parseFloat(second.top);
      const secondBottom = secondTop + second.height;

      // Check if any of the edges of the two rectangles overlap
      if (firstLeft < secondRight &&
          firstRight > secondLeft &&
          firstTop < secondBottom &&
          firstBottom > secondTop) {
        // The rectangles overlap
        console.log("rectanglesOverlap: true");
        return true;
      }

      // The rectangles don't overlap
      console.log("rectanglesOverlap: false");
      return false;
    }
  },

  mounted() {

  }

}
</script>

<style scoped>

  #wrapper  {
    margin: 2em;

    height: 100px;
    min-height: 100px;

    width: 500px;
    min-width: 500px;

    background-color: darkblue;
    position: relative;
  }
</style>

测试页面版本：

<template>
  <div id="test-page">
    <TestComponent/>
   </div>
</template>

<script>

 import TestComponent from "@/app/test/TestComponent";
 export default {
  name: "TestPage",
  components: {TestComponent },

   async beforeCreate() {

   },

   methods: {

   },
}
</script>

<style scoped>
  #test-page  {
    background-color: yellow;
    width: 50%;

    display: flex;
    justify-content: center;
  }
</style>

当我访问TestPage时，我看到：

如果我更新页面：

可以看出，圆圈随机放置在蓝色div内，圆圈不重叠。
蓝色div的宽度500px和高度100px以及每个圆圈的高度和宽度（50px）是硬编码的。
它工作正常（至少在我的PC上），但它不适用于调整浏览器窗口大小，或切换到移动的：

我需要它看起来在移动的/较小的浏览器窗口/规模确定。
但是我不知道该如何处理它。我有一个想法，我需要用适当的值替换created中的wrapperWidth，wrapperHeight，circleWidth，circleHeight。但是在created()中，无法访问 Package 器div，因为它还不存在。我应该如何处理它？
在移动的上看起来应该是这样的：
x1c4d 1x到目前为止，我一直在使用媒体查询，使我的网站响应：

@media screen and (max-width: 500px) {
  .wrapper {
    max-width: 90% !important;

  }

  .btn  {
    font-size: 0.8em;
   }
}

因此，假设蓝色 Package 器div的宽度由媒体查询控制，与圆圈的宽度相同，我应该如何响应地将它们放置在蓝色div上？
任何帮助都是感激的！

编辑：

一个明确而具体的问题：如何让它在手机大小的屏幕上工作？