css - 决定响应式布局

Question

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

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

我创建了一个 fiddle 来代表我的页面。如果有任何标准准则来决定标准布局的响应行为，请告诉我。

在 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>

CSS:

.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:http://jsfiddle.net/pEgqc/2/

jsfiddle 全屏:http://jsfiddle.net/pEgqc/2/embedded/result/

Answer 1

Brad Frosts Pattern Lab - Forms 对您来说是一个很好的资源.

最适合您的是这一款 http://codepen.io/chriscoyier/full/DmnlJ