jquery - 厳密な流体レイアウト | jQuery プラグイン

Question

jsFiddleの表示 または JS Binの表示

私は今日、Fluid レイアウトと Fixed width レイアウトの両方を組み合わせて、レスポンシブ レイアウトの構築を高速化できるこのアイデアを思いつきました。また、レイアウトでのパーセンテージの使用がより適切に機能するようになります。

これを行うために、フレームレス グリッド システムと同様のアイデアを使用しています。

「ピクセルごとではなく、列ごとに適応させます。」

カラムを使用するのではなく、サイズ1 unitを一度に調整しています。jsFiddleの例は一度に調整10pxします。この例は、パーセンテージを使用する際にこれがどのように役立つかを示しています。@mediaと でスタイルを使用してこれをmax-width行いmin-widthます。

私が遭遇した問題は、すぐに多くの@mediaスタイルがあり、すべてを手動で入力する必要があるということです. そこで、かなり単純な jQuery プラグインを使用するだけでよいと考えました。ただし、私は jQuery の知識が限られているため、これがどのように行われるかについては、jsFiddleでマップした漠然とした考えしかありません。

jsFiddleの表示 または JS Binの表示

CSS@mediaスタイルの一部を次に示します。

@media only screen and (max-width: 249px) {.test.two {width: 240px}}
@media only screen and (max-width: 259px) and (min-width: 250px) {.test.two {width: 250px}}
...
@media only screen and (max-width: 1259px) and (min-width: 1250px) {.test.two {width: 1250px}}
@media only screen and (min-width: 1260px) {.test.two {width: 1260px}}

そして、マッピングされたjQuery Fiddle

$('.test.two').strictfluid(10px 240px 1260px); // Apply function

var resizeEvery = 'first (10px)';
var minWidth = 'second (240px)';
var maxWidth = 'third (1260px)';

var calculate = minWidth;

// First @media :
"@media only screen and (max-width: " + (min-width + (resizeEvery - 1)) + " ) {" + min-width +"}}"

    calculate = calculate + resizeEvery;

// Middle @media's (Repeat While {calculate < maxWidth})
"@media only screen and (max-width: " + (calculate + (resizeEvery - 1)) + " ) and (min-width: " + (calculate) + " ) {" + (calculate) +"}}"

    calculate = calculate + resizeEvery;

// Last @media : 
"@media only screen and (min-width: " + (max-width) + " ) {" + max-width +"}}"

jsFiddleの表示 または JS Binの表示