Javascript 如何在CSS中自动调整跨度圆的大小

嗨，我正在创建一个react项目，我正在尝试向我的页面添加一些圆圈（5），我已经创建了一个固定大小的圆圈，当我最小化浏览器时，我找不到根据窗口大小调整圆圈大小的方法。圆圈的重量和长度保持不变

HTML和CSS:

.y\u点{
位置：绝对位置；
宽度：336px；
高度：336px；
左-5%；
底部-10%；
边界半径：50%；
背景：#EBD510；
}

欢迎

您可以使用vh（视口高度）或vw（视口宽度）而不是px使值取决于视口大小

// will set height and width to 
// 5% of window’s width
.y_dot {
    height: 5vw;
    width: 5vw;
}

另一种方法是使用媒体查询来创建窗口达到一定大小后应用的规则

// will set height and width of dot to 
// 300px when screen is smaller than 600px.
@media only screen and (max-width: 600px) {
  .y_dot {
    height: 300px;
    width: 300px;
  }
}

---

viewport的实现成功了，谢谢！我不知道。