反应迅速的网页设计/容器

发布于 2025-02-02 23:19:21 字数 1989 浏览 3 评论 0原文

我正在创建一个网站以显示数据使用情况，但是当我调整窗口大小时，该页面根本没有响应。有什么办法可以为此添加响应式包装器或CSS样式，因此如果我使窗口较小，它会响应吗？同样，如果有一种方法可以在一定量的数字后添加从MB到GB的转换，它也将减少数字的长度。

这是原始代码：

                    <Row className="box-container">

                <div className="box" >
                        {this.props.loading?this.renderSpinner():null}
                        {textDisplay}
                        <Row>
                            <p>Active </p>
                        </Row>
                        <Row>
                            <p>Inactive </p>
                        </Row>
                        <Row>
                            <p>Suspend </p>
                        </Row>
                </div>


                    <div className="box">
                        Current Period Usage
                        {this.props.loading?this.renderSpinner():null}
                    <h2>17777777777777777777777777777777777777777777777777MB</h2>
                    </div>


                    <div className="box">
                        Added This Period
                    </div>
            </Row>

和CSS文件看起来像这样：

.box-container{
    margin: auto;
    width:85%;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(30%, 1fr));
    grid-template-rows: minmax(auto, auto);
    grid-auto-flow: dense;
    grid-gap:20px
}
.box-container .box {
    border-radius: 15px;
    border: 3px solid black;
    padding: 20px;
    display: grid;
    place-items: center;
    text-align: center;
    grid-column: unset;
    grid-row: unset;
}

原文

I am creating a website to display data usage but when i resize the window, the page is not responsive at all. Is there any way I can add a responsive wrapper or CSS style to this so it is responsive if I made the window smaller? Also if there is a way to add a convertion from MB to GB after a certain amount of number it will also reduce the length of the number.

Here is the original code:

                    <Row className="box-container">

                <div className="box" >
                        {this.props.loading?this.renderSpinner():null}
                        {textDisplay}
                        <Row>
                            <p>Active </p>
                        </Row>
                        <Row>
                            <p>Inactive </p>
                        </Row>
                        <Row>
                            <p>Suspend </p>
                        </Row>
                </div>


                    <div className="box">
                        Current Period Usage
                        {this.props.loading?this.renderSpinner():null}
                    <h2>17777777777777777777777777777777777777777777777777MB</h2>
                    </div>


                    <div className="box">
                        Added This Period
                    </div>
            </Row>

And the CSS file looks like this:

.box-container{
    margin: auto;
    width:85%;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(30%, 1fr));
    grid-template-rows: minmax(auto, auto);
    grid-auto-flow: dense;
    grid-gap:20px
}
.box-container .box {
    border-radius: 15px;
    border: 3px solid black;
    padding: 20px;
    display: grid;
    place-items: center;
    text-align: center;
    grid-column: unset;
    grid-row: unset;
}