严格的流体布局| jQuery 插件

Question

查看 jsFiddle 或者 查看 JS Bin

我今天有了这个想法，可以结合流体和固定宽度布局，并且还可以使响应式布局更快建造。它还将使布局中百分比的使用效果更好。

为此，我使用了与无框架网格系统类似的想法。

“逐列调整，而不是逐像素调整。”

我没有使用列，而是一次调整 1 个单位 的大小。 示例 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 小提琴

$('.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