1

私は適応型レイアウトのサイトで作業しています。これは、サイトがユーザーの画面幅に適応することを意味します。私のアイデアを説明する 3 つの画像があります。画像は、ブラウザー ウィンドウのサイズを幅広から狭めに変更する 3 つのステップを示しています。

ワイド スクリーン 紫色の領域がページの左側にくっつき、緑色の領域が画面の残りの部分に収まります。

ワイドスクリーン

中画面 の緑色の領域が最小幅に達した 中画面

紫色の領域の下に狭い画面 の緑色の領域がジャンプします

狭い画面

私は次のスタイルを使用します

.purple_block {
    float: left;
    width: 751px;
    height: 504px;
    margin: 0 35px 100px 0;
}

.green_block{
    min-width: 400px;
}

しかし、緑のブロック幅は紫の領域の左端から緑の領域の右端まで計算されるため、この「最小幅」は機能しません。

望ましい動作を達成する方法は？

更新 紫色のブロックは常に修正する必要があります (実際にはプロジェクト ギャラリーです)。緑色のブロックには紫色のブロックからの余白があり、残りのすべてのスペースに収まる列のように見える必要があります (これはプロジェクトの説明です: いくつかの段落のテキスト + リンクです)。ユーザーがブラウザの緑色のブロックを狭めると、幅も狭くなります。緑色のブロックが最小幅に達すると、紫色のブロックの下にジャンプします。

4

1 に答える 1

2

画面サイズ固有のCSSが必要なようです。を使用してそれを定義できます

@media only screen and (max-width: ...px) { ... }

したがって、すべての状態（個々の画像がそれらを示している）に対して、そのブラウザーウィンドウ幅で変更する必要があるCSSを定義します。

例えば

@media only screen and (max-width: 1000px) {
    .purple_block {
        float: none;
        width: 100%;
        height: 504px;
        margin: 0 35px 100px 0;
    }

    .green_block{
        width: 100%;
        height: 300px;
    }
}

等々。

于 2012-08-16T12:55:10.080 に答える