Question

是否有支持全视口宽度的CSS网格系统？大多数网格系统似乎只想要宽度为960px到1140px。这是普通用户最常部署的宽度（因为大多数人使用的是1280px×1024px）。

我的目的是为用户提供响应式布局，甚至使用全高清分辨率（1920px×1080px）。

如果有更好/更简单的方法，请告诉我

Answer 1

Twitter bootstrap流体网格系统使用百分比：http://twitter.github.com/bootstrap/scaffolding.html#fluidGridSystem

还有很多纯css响应式网格系统，例如：Skeleton

本文涵盖了很多内容：http://speckyboy.com/2011/11/17/15-responsive-css-frameworks-worth-considering/

可以自己使用css宽度，media queries和js回退的百分比（因为不完全支持媒体查询）。

但是那些网格系统可以为您节省时间和头痛，因为它们是经过最佳测试的。

为了帮助您做出决定，您应该考虑：

您需要的浏览器支持和网格系统提供的支持。
大小（大多数都是轻量级的，但有些不仅仅是网格系统，即Twitter引导程序）。
命名惯例，你会的使用奇怪的css类（例如span4），选择你喜欢的那个，其中一些比其他语义更具语义，这取决于你。
并且在至少，开源因素：社区，支持，更新频率...

此外，此网站是最具响应性的灵感来源：http://mediaqueri.es/

Answer 2

我一直在研究一种名为Fluidable的流体网格系统。您可以将max-width设置为您喜欢的任何内容。在您的情况下，您可以简单地将其设置为100％，并且网格将耗尽所有空间。您还可以配置您想要使用的任意数量的列。

https://github.com/andri/Fluidable

Answer 3

对于小型项目，我建议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>

Answer 4

您可以尝试ARC grid，这是我编写的简单网格系统，默认情况下支持全宽。

用法语法：

<div class="grid">
    <div class="row">
        <div class="col s6 m4"></div>
        <div class="col s6 m4"></div>
        <div class="col m4"></div>
    </div>
</div>

更多示例和演示here

有没有全宽度支持CSS网格系统？

4 个答案: