时间戳

首页 > 解决方案 > 如何在 CSS 中自动调整跨度圆的大小

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

问题描述

嗨，我正在创建一个反应项目，我试图在我的页面中添加一些圆圈 (5)，我已经创建了固定大小的圆圈，当我最小化浏览器圆圈时，我找不到根据窗口大小调整它们大小的方法保持相同的重量和长度。

HTML 和 CSS：

.y_dot{
    position: absolute;
    width: 336px;
    height: 336px;
    left: -5%;
    bottom: -10%;
    border-radius: 50%;
    background: #EBD510;

}
<div className="Circle_App">
        <h1 className="appHeader"> Welcome</h1>
        <div>
            <span class="b_dot"></span>
            <span class="g_dot"></span>
            <span class="p_dot"></span>
            <span class="y_dot"></span>
            <span class="o_dot"></span>
        </div>
</div>

其他 span 的 CSS 配置几乎相同，只是改变了圆圈的位置或大小。

有人对此有提示吗？

标签： javascripthtmlcss

解决方案

您可以使用 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;
  }
}

推荐阅读