0

これが本当の質問ではないことはわかっていますが、これに関連するものをインターネット上で見つけることができません。スタックオーバーフローに適していない場合は、私の質問を読んでください。先に進んで、これをクローズ済みとしてマークできます。

流動的な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