1

レスポンシブ デザインの多くは、パーセンテージ幅と絶対配置を使用して、さまざまなメディア タイプの画面幅に適応することを知っています。しかし、一般的には使用されていないがブラウザー間の互換性が高い float right css スタイルを利用できるとしたらどうでしょうか?

デモ: http://jsfiddle.net/3A89Q/48/

.wrapper { width: 70%; margin: 0 auto; }
div, span { display: block; float: left; position: relative; }
.wrapper > div { width: 60px; }
.b1 { background-color: blue; height: 132px; }
.b2 { background-color: red; height: 88px; }
.b3 { background-color: green; height: 44px; }
.test { background-color: black; max-width: 160px; min-width: 100px; float: right; border: 2px solid black; }
.test div { width: 16px; height: 16px; background-color: yellow; margin: 2px; }


<section class="wrapper">
    <div class="b1"></div>
    <div class="b2"></div>
    <div class="b3"></div>
    <span class="test">
        <div></div>
        <div></div>
        <div></div>
    </span>
</section>

私の考えは、パーセンテージを使用せずに右の浮動要素を最小幅に縮小することです。この縮小プロセスは、ウィンドウ幅のサイズが縮小されたときに、隣接する要素が要素の使用可能なスペースを制限しているという条件でのみ発生する必要があります。要素に使用可能なスペースが制限されていない場合、要素はその幅を最大長まで増やします。したがって、事実上、要素には最大幅と最小幅があり、サイズの柔軟性の特定の範囲を管理します。(注: この幅の範囲は、上記でリンクした jsfiddle デモで結果ウィンドウを小さなサイズに縮小することで簡単に実証できます。)

この時点で、右の浮動要素が左の浮動要素にマージされると、最大幅を維持したまま左の浮動要素の下に浮動します。

私の望む結果は、この右側の浮動要素を最小サイズに縮小してから、隣接する要素の下に浮動させることです。要素が最小サイズに達すると、隣接する要素の下にドロップダウンし、次に幅を増やして残りのスペースを最大幅まで埋め、右に浮かびながら利用可能なスペースに適応するプロセスを繰り返し始めます。

私の質問は、css / css3 を使用するだけで目的の結果を達成できるかということです。そうでない場合、この機能を実行する JavaScript / jQuery プラグインはありますか? 上記の jsfiddle デモをリンクして、このアイデアの解決策を理解して活用できるようにしました。

ご協力ありがとうございました。

4

1 に答える 1

0

CSS メディア タグを使用してさまざまな画面サイズをターゲットにすることについて考えたことはありますか?

ここに参照リンクがあります。

http://webdesignerwall.com/tutorials/css3-media-queries

jQuery のアプローチでは、サイズ変更イベント ハンドラーを使用し、それに応じて jQuery で CSS を調整します。これは、ブラウザ ウィンドウのサイズが変更された場合のみです。ドキュメントの準備ができたら代替として、幅と高さを動的に計算できます。

このスタック ソリューションを参照してください。jQuery を使用してビューポートのサイズを取得する

ここに別の参照リンクがあります

http://api.jquery.com/resize/

于 2013-08-20T08:30:03.677 に答える