我今天有一个想法,它可以结合 Fluid 和 Fixed width 布局,还可以更快地构建响应式布局。它还可以更好地使用布局中的百分比。
为此,我使用了与无框网格系统类似的想法。
“逐列调整,而不是逐像素调整。”
我没有使用列,而是1 unit
一次调整大小。示例 jsFiddle 一次调整,该10px
示例显示了这如何有助于使用百分比。它通过使用带有和的@media
样式来做到这一点。max-width
min-width
我遇到的问题是您很快就会拥有很多@media
样式,并且您必须手动输入每一个样式。所以我认为它可以只使用一个相当简单的 jQuery 插件。但是,我对 jQuery 的了解有限,所以我对如何做到这一点只有一个模糊的想法,我已经在jsFiddle中绘制了出来。
下面是一些 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 +"}}"