视口单位

如果使用相同的视口单位（vw或vh），则应得到响应圆。
100的视口单位是宽度或高度的100%，因此它非常类似于使用百分比。

div {
  width: 10vw;
  height: 10vw;
  border-radius: 50%;
  background: blue;
}

<div></div>

您可以使用以下内容制作一个内容居中的圆：

• padding-bottom根据圆的宽度保持圆的纵横比（more info here）
• transform:translate(-50%,-50%);，具有绝对定位功能，可将内容垂直和水平置于圆的中心（参见this answer中的方法1）

.circle{
  position:relative;
  width:50%;
  padding-bottom:50%;
  background:gold;
  border-radius:50%;
}
.circle h3{
  position:absolute;
  top:50%; left:50%;
  transform: translate(-50%, -50%);
  margin:0;
}

<div class="circle">
  <h3>Hello</h3>
</div>

• 请注意，您需要向transform属性添加供应商前缀，以最大限度地支持浏览器（有关详细信息，请参阅canIUse）。*

CSS具有aspect-ratio属性，该属性适用于元素的宽度和高度。
有关web的更多信息：https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio
有关react native的更多信息：https://reactnative.dev/docs/layout-props#aspectratio

.circle {
  width: 100%;
  border-radius: 50%;
  color: white;
  background-color: blue;
  text-align: center;
  aspect-ratio: 1 / 1;
}

@media规则用于媒体查询，以便为不同的媒体类型/设备应用不同的样式/大小/宽度/高度。
媒体查询可用于检查许多内容，例如：
视口的宽度和高度设备方向的宽度和高度（平板电脑/手机处于横向模式还是纵向模式？）分辨率
参见以下示例：

/* Mobile & small screen size devices*/
    @media only screen and (max-width: 600px) {
            .circle {
            width: 210px!important;
            height: 210px!important;
        }
    }

    /* Desktop, Laptop, Tablet */
    @media only screen and (min-width: 650px) {
        .circle {
            width: 356px;
            height: 356px;
        }
    }

    .circle {
        margin: auto;
        width: 356px;
        height: 356px;
        opacity: 1;
        border-radius: 50%;
        background-color: gray;
    }

<div class="circle"></div>