0

我知道这不是一个真正的问题，但我无法在互联网上找到与此相关的任何内容。如果您发现它不适合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>

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/

4

1 回答 1

1

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

最适合你的是这个http://codepen.io/chriscoyier/full/DmnlJ

于 2014-05-06T14:39:30.863 回答