响应式网格布局框架[关闭]

我想要为我当前的 Web 项目提供一个易于使用的网格框架。这些是我想要的功能：

• 流体网格布局：可以水平对齐（并排）的框，每个框具有相同的高度（例如 3 列布局），使用 100% 宽度
• 反应能力：调整浏览器窗口大小时自动适应
• 移动设备：显示平板电脑和手机的替代贴合布局
• 字体大小：可选择动态调整文本大小（例如全角标题）
• 图片大小：可选择动态调整图像大小（例如全宽图像库）
• 断点：可以选择定义触发改变布局的事件的宽度值（例如，如果宽度低于阈值则删除按钮）

Update

我找到了很多网格，但将其范围缩小到以下三个有前途的框架，它们可能很适合我的要求：

• Foundation http://foundation.zurb.com/
• Semantic Grid http://semantic.gs/
• Golden Grid System http://goldengridsystem.com/

以下是所有其他内容：

• CSS Grid http://cssgrid.net/ (not fluid)
• 320 and Up http://stuffandnonsense.co.uk/projects/320andup/ (not fluid)
• Columnal http://www.columnal.com/ (not fluid)
• Skeleton http://www.getskeleton.com/ (not fluid)
• SimpleGrid http://simplegrid.info/ (not fluid)
• Less Framework http://lessframework.com/ (not fluid)
• Bootstrap http://twitter.github.com/bootstrap/ (non-semantic classes)
• Breakpoints.js http://xoxco.com/projects/code/breakpoints/ (only breakpoints, too similar to media queries)
• Adaptive images http://adaptive-images.com/ (only images)
• FitText http://fittextjs.com/ (only text)
• Gridset http://www.gridsetapp.com/ (commercial)
• HTML5 Boilerplate http://html5boilerplate.com/ (old)

通常，我会在在这里提问之前自己测试它们，以便我可以提出更具体的问题。但由于框架数量巨大，我想听听一些从哪里开始的建议。

1. 您对这些或其他类似框架的体验如何？
2. 您能推荐一个符合我的要求的特定框架吗？

Solution

我最终使用了Foundation http://foundation.zurb.com/在我看来，这显然是这场比赛的赢家。

Update 2

引导程序3 http://getbootstrap.com/现在是一个真正的竞争，因为它也支持语义网格类。它支持 SASS 和 LESS。

我之前使用过列式，除了断点功能之外，它确实提供了您想要的大部分功能。 它易于使用且具有适应性。在移动屏幕中，网格降级为堆栈，因此所有列内容都显示在另一个下面。 然而，对于智能适应功能，正如您在断点功能中概述的那样：我强烈建议您直接使用 CSS 3 媒体查询，因为这正是它们的用途，而且使用起来并不困难。在工作表下提供这些功能的 CSS 框架仅使用媒体查询。

看看http://twitter.github.com/bootstrap/scaffolding.html#responsive http://twitter.github.com/bootstrap/scaffolding.html#responsiveBootstrap 流体网格确实提供了一些方便的快捷方式，用于为列中不存在的特定屏幕尺寸设置 css 属性。