css - 是否有任何全宽度支持 CSS 网格系统？

Question

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

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

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

Answer 1

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 后备的百分比（因为媒体查询不完全支持）。

但是这些网格系统将为您节省时间和麻烦，因为它们是经过最充分测试的。

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

• 您需要的浏览器支持以及网格系统提供的浏览器支持。
• 大小（它们对大多数人来说是轻量级的，但有些不仅仅是网格系统，即 Twitter 引导程序）。
• 命名约定，你将使用奇怪的 css 类（例如span4），选择你喜欢的，其中一些比其他的更具语义，这取决于你。
• 至少，开源因素：社区、支持、更新频率……

此外，这个网站最适合响应式灵感： http: //mediaqueri.es/

Answer 2

我一直在研究一个名为 Fluidable 的流体网格系统。您可以将最大宽度设置为您喜欢的任何内容。在您的情况下，您可以简单地将其设置为 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>

更多示例和演示在这里