Решение адаптивных макетов

Question

Я знаю, что это не настоящий вопрос, но я не могу найти что-либо в Интернете, связанное с этим. Пожалуйста, прочитайте мой вопрос, если вы считаете, что он не подходит для stackru, вы можете пометить это как закрытое.

У меня есть 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