Question

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

Answer 1

优秀的资源是Brad Frosts Pattern Lab - Forms。

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

决定响应式布局

1 个答案: