1

查看 jsFiddle 或 查看 JS Bin

我今天有一个想法，它可以结合 Fluid 和 Fixed width 布局，还可以更快地构建响应式布局。它还可以更好地使用布局中的百分比。

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

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

我没有使用列，而是1 unit一次调整大小。示例 jsFiddle 一次调整，该10px示例显示了这如何有助于使用百分比。它通过使用带有和的@media样式来做到这一点。max-widthmin-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

4

0 回答 0