是否有任何支持全视口宽度的 CSS 网格系统?大多数网格系统似乎只打算宽度为 960 像素到 1140 像素。这是普通用户部署最多的宽度(因为大多数人使用 1280px × 1024px)。
我的目的是为使用全高清分辨率(1920px × 1080px)的用户提供响应式布局。
如果有更好/更简单的制作方法,请告诉我
是否有任何支持全视口宽度的 CSS 网格系统?大多数网格系统似乎只打算宽度为 960 像素到 1140 像素。这是普通用户部署最多的宽度(因为大多数人使用 1280px × 1024px)。
我的目的是为使用全高清分辨率(1920px × 1080px)的用户提供响应式布局。
如果有更好/更简单的制作方法,请告诉我
Twitter 引导流体网格系统适用于百分比:http: //twitter.github.com/bootstrap/scaffolding.html#fluidGridSystem
还有很多纯css响应式网格系统,例如:Skeleton
这篇文章涵盖了很多:http ://speckyboy.com/2011/11/17/15-responsive-css-frameworks-worth-considering/
可以自己做到这一点,使用 css 宽度、媒体查询和 js 后备的百分比(因为媒体查询不完全支持)。
但是这些网格系统将为您节省时间和麻烦,因为它们是经过最充分测试的。
为了帮助您做出决定,您应该考虑:
span4
),选择你喜欢的,其中一些比其他的更具语义,这取决于你。 此外,这个网站最适合响应式灵感: http: //mediaqueri.es/
我一直在研究一个名为 Fluidable 的流体网格系统。您可以将最大宽度设置为您喜欢的任何内容。在您的情况下,您可以简单地将其设置为 100%,网格将用完所有空间。您还可以配置您喜欢使用的任意数量的列。
对于小型项目,我会推荐Amazium。它提供 12 列、嵌套、偏移和基本媒体查询。为了获得全屏网格,您的标记应如下所示:
<div class="row-max">
<div class="grid_12">
...
<div class="row-max">
<div class="grid_6">...</div>
<div class="grid_6">...</div>
</div>
</div>
</div>