使框在CSS中响应

我试图让盒子对手机的缩放做出响应，但当我调整窗口大小时，发现盒子非常小

以下是HTML代码：

            <div class="box">
                <h1>Health Status</h1>

                    <input type="text" id="check_infected" name="infected_check" placeholder="Infected by Corona? (Yes/No)">


                    <input type="submit" onclick="UpdateHealth();" value="Update">

                <div class="bottom-text">
                    We ensure to secure your health as well as the public health
                </div>

这是未调整大小时的图像：

调整其大小后，它会变得非常小：

---

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

在媒体查询中，您只定义了不同的填充顶部和填充底部，但其余设置与常规CSS规则相同，例如宽度：30%，这可能是主要问题

您需要在媒体查询中包括并更改要更改的每个设置，尤其是宽度和填充，类似于以下内容：

@media only screen and (min-width: 375px) and (max-width: 812px) {
  .box{   
    box-sizing: border-box; 
    width: 80%;
    padding-left: 10%
    padding-right: 10%;
    padding-top: 60px;
    padding-bottom: 60px;
  }

}

初步版本：此anwser需要根据OP/任何评论进行一些更新，因此，请对错误、不一致和遗漏进行评论

简介 虽然问题很简单，“如何缩放一个盒子以适合任何设备？”但需要考虑很多因素。我不会对它们进行总结，而是使用发布的图片和代码OP，并通过这些图片和代码展示我是如何通过近似得到最终版本的

在任何情况下，当CSS计算中的一个等式可以很好地完成工作时，我不会使用多个媒体查询。在过去的几年中，我学会了使用一个公式，举几个例子来计算任何给定浏览器视口大小的CSS大小属性值，而不是使用MQs列表测试特定视口大小的“断点”并设置特定大小属性值

数学是非常严格的线性方程：y=mx+b，它使用直线上的两个已知点来计算该直线上的所有其他点。检查，易于理解的中学解释，非常值得阅读

赞成：短代码，适用于任何接受CSS计算的CSS大小属性。结果是更少的CSS，更少的维护

缺点：编码时可能需要更多的准备，只适用于直线，不包括火箭科学，CSS计算结果的例外可能仍然需要一些媒体查询

tl；dr-这是一个相当多的文本，所以这里是第一个片段：

/* 所有REM大小以符合浏览器用户字体设置REM=size/16 */ .盒子{ /* 进入方法1。Stackoverflow 61980111创建最后一个方框， 我们只需要定义一些智能填充。 T/B 320601760,30，y=-2.08vmin+66.67 L/R 320301760100，y=4.87x+14.45 */ 填充：calc-2.08vmin+4.167rem calc-4.87vmin+0.9rem； } /*320141280,20，y=0.00625x+12*/ html{font size:calc0.625vmin+0.75rem} 正文{font size:1rem} 输入{字体大小：0.875rem；文本对齐：居中} /*320181920,28，y=0.00625x+16*/ h1{字体大小：calc0.625vmin+1rem；字体重量：正常} /*柔性箱布局*/ .wrapper.box{显示：柔性；柔性方向：列；对齐内容：中心；对齐项目：中心} .wrapper{高度：100%} /**************************************/ /*普遍接受的优先规则*/ /**************************************/ html，正文{框大小：边框框；宽度：100%；最大宽度：100%；高度：100%} *：：之前，*：：之后，*{框大小：继承} 正文{页边距：0} /******************/ /*仅限赏心悦目*/ /******************/ 身体{ 颜色：rgba0,0,0,7； 背景图像：线性梯度330度，e94974，8073ab } @媒体方向：纵向和最小宽度：50rem， 方向：横向和最小高度：50rem{ 主体{背景图像：线性梯度330度，3f96c8，23c1bc} } .盒子{ 背景色：白色； 文本对齐：居中； /*GMC高程3dp*/ 盒影：0px 3px 3px-2px rgba0,0,0,20， 0px 3px 4px 0px rgba0,0,0,14， 0px 1px 8px 0px rgba0,0,0,12； } 输入{页边距底部：1.5rem} .药丸{ 框大小：边框框； 位置：相对；溢出：隐藏；光标：指针； /*柔性箱布局*/ 显示：内联flex； 证明内容：中心； 对齐内容：居中对齐； 对齐项目：居中； /*覆盖默认样式*/ 填充：0；边框：无；轮廓：无；文本装饰：无； /*尺寸*/ 宽度：70%； 高度：calc0.75vmin+2.85rem；/*320481920,60，y=0.75x+45.6*/ 线高：calc0.75vmin+2.85rem； /*造型*/ 不透明度：.85； 背景色：透明；颜色：currentColor； 边框：2px实心ee7752； 边界半径：calc0.75vmin+2.85rem/2； /*IE对此有问题，不会显示圆形边框，这是众所周知的怪癖*/ /*内容不可选择*/ -webkit用户选择：无；-moz用户选择：无；-ms用户选择：无；用户选择：无； -moz外观：无；-webkit外观：无； } .pill:hover{opacity:1} /*覆盖默认药丸边框颜色*/ 输入[type=submit].pill{边框颜色：23a6d5} / *模拟按钮“按下”行为*/ 输入[类型=提交]：活动{transform:scale.99} 健康状况

我们确保您的健康和公众健康

---

简短回答：在CSS代码中，图像宽度为30%。当屏幕为1000px时，图像为300px时正常，但当手机屏幕为320px时，图像仅为96px。

html在哪里？您需要提供一个工作代码段。但是不要定义宽度，让宽度由内容定义。我只是更新了HTML代码。如何根据内容定义宽度？

@media only screen and (min-width: 375px) and (max-width: 812px) {
  .box{   
    box-sizing: border-box; 
    width: 80%;
    padding-left: 10%
    padding-right: 10%;
    padding-top: 60px;
    padding-bottom: 60px;
  }

}