Css 确定响应性布局

我知道这不是一个真正的问题，但我在互联网上找不到任何与此相关的东西。请阅读我的问题，如果您发现它不适合stackoverflow，您可以继续并将其标记为关闭

我有一个流动的html页面。它有特定的表单字段。它们从左到右伸展。我被告知要做的是将该布局转换为响应式布局。我可以编写自己的媒体查询。我无法确定响应行为，即填充、位置和尺寸与各种屏幕尺寸成比例

我创建了一个小提琴来代表我的页面。请让我知道是否有任何标准的指导方针来决定标准布局的响应行为

在firefox中，我们可以按Ctrl+Shft+M来检查各种分辨率选项

HTML:

<div class="main-container">
    <div class="container">
        <section>
            <label>First name:</label>
            <input type="text" />
        </section>
        <section>
            <label>Last name:</label>
            <input type="text" />
        </section>
    </div>
</div>

.main-container {width:99%; height:auto; display:table; background-color:red; margin:0 auto}
.container {display:table-cell; padding:0 80px; border:1px solid #000}
section {display:table; width:100%; padding:10px 0}
label {display:table-cell; width:100px}
input {width:100%; border:1px solid gray}

jsfiddle：

---

jsfiddle全屏显示：

这是一个非常好的资源

---

最适合您的是这个

一旦您设计了屏幕分辨率（例如1280 px*1280 px），然后您的目标屏幕为640px*640px，您的所有尺寸减半以匹配目标屏幕。根据需要，位置可能因屏幕大小不同而有所不同。编写媒体查询以查找所需的断点，将具有上述相同规则集的选择器添加到所有查询中，然后打开页面（我更喜欢chrome，但看起来您使用的是firefox）并打开元素检查器（开发者工具）根据不同的断点调整窗口大小，并在inspector中根据需要进行调整，直到获得所需的外观，然后在实际的css文件中进行调整。