使框在CSS中响应

由 发布于

我试图使盒子响应移动设备的缩放，但是事实证明，当我调整窗口大小时，它很小。 这是CSS代码：

.box{
    width: 30%;
    padding-top: 30px;
    padding-bottom: 30px;
    padding-left: 100px;
    padding-right: 100px;
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    background: #ffffff;
    text-align: center;
}

@media only screen and (min-width: 375px) and (max-width: 812px) {
    .box{    
        padding-top: 60px;
        padding-bottom: 60px;
    }

  }

This is the image when it is not resized: enter image description here

调整大小时结果非常小：

enter image description here

如何使框与屏幕成比例，或者至少使响应式框更易于查看？