1

レスポンシブレイアウトの作業を始めたばかりで、nav要素に関連する特定の質問がありました。

私がこのようなコードのブロックを持っていた場合：

<nav>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
</nav>
<nav>
    <ul>
        <li>4</li>
        <li>5</li>
        <li>6</li>
    </ul>
</nav>

これを高解像度のコンピューター画面で表示すると、ナビゲーションによって作成された2x3グリッドが表示されます。つまり、各ナビゲーションは独自の「線」上にあり、各ナビゲーションの3つの要素はすべて互いに右または左にあります。

レスポンシブレイアウトでは、ウィンドウのサイズが大幅に縮小された場合、たとえばiPhoneの解像度に合わせて、正しいプロポーションを想定すると、ナビゲーション要素が不自然に変化し、そのビューは次のようになります。

<nav>
    <ul>
        <li>1</li>
        <li>2</li>
    </ul>
</nav>
<nav>
    <ul>
        <li>3</li>
    </ul>
</nav>
<nav>
    <ul>
        <li>4</li>
        <li>5</li>
    </ul>
</nav>
<nav>
    <ul>
        <li>6</li>
    </ul>
</nav>

この新しいレイアウトの実践が特にnav要素に対してどのように機能するかについての高レベルの理解を探しています。私が作成しているWebサイト用にこのようなものを作成したいと思っていますが、これが発生する場合は、高解像度で2x3マトリックス、低解像度で3x2のマトリックスを作成し、6x1に移行するコードを作成します。非常に小さい解像度。

この場合、特定の画面解像度に対して、異なるhtmlを指定する方法はありますか？さまざまな解像度に特定のCSSを指定できることは知っていますが、この場合、CSSを変更しても必要な処理が実行されるかどうかはわかりません。

4

1 に答える 1

0

あなたの説明から、あなたulのはブロック表示であり、lisはインライン表示であると理解しています。これにより、nav / ulの周囲に長方形のブロックが作成され、2x3レイアウトが発生しなくなります。Jrodがコメントで指摘したように、本当に必要なのは、すべてのliアイテムをラップし、ブラウザーにそれらを配置させる単一の長方形のブロックです。

これは、すべてのliをまとめることで実現できます。または、ulとnavの表示プロパティをインラインに変更し、2つのnavの周囲にコンテナを配置して、最終的にブロックごとにグループ化することで実現できます。

div.container { display: block; }
nav, ul, li { display: inline; }

このソリューションでは、2つの空のセルを持つ4x2グリッドも作成される可能性があるため、外側のブロックを3つのliの幅に制限するようにしてください。

li { width: 150px; /* or whatever */ }
div.container { max-width: 450px; /* three lis at most */ }
于 2012-11-27T21:00:14.247 に答える