响应式网格布局框架

Question

我想为当前的Web项目使用易于使用的网格框架。这些是我很欣赏的功能：

• 流体网格布局：可以水平对齐（并排）的框，每个框具有相同的高度（例如3列布局），工作宽度为100％
• 响应能力：调整浏览器窗口大小时自动调整
• 移动设备：显示适用于打击垫和手机的备用布局
• 文字大小：可选择动态调整文字大小（例如全角标题）
• 图片尺寸：可选择动态调整图片尺寸（例如全宽图片库）
• 断点：可选择定义触发更改布局的事件的宽度值（例如，如果宽度低于阈值，则移除按钮）

更新

我找到了许多网格，但将其缩小到以下三个可能非常适合我的要求的有前途的框架：

• Foundation
• Semantic Grid
• Golden Grid System

以下是其他所有内容：

• CSS Grid （不流畅）
• 320 and Up （不流畅）
• Columnal （不流畅）
• Skeleton （不流畅）
• SimpleGrid （不流畅）
• Less Framework （不流畅）
• Bootstrap （非语义类）
• Breakpoints.js （只有断点，与媒体查询太相似）
• Adaptive images （仅限图片）
• FitText （仅限文字）
• Gridset （商业）
• HTML5 Boilerplate （旧）

通常情况下，我会在问这里之前自己测试一下，以便我可以制定更具体的问题。但由于有大量的框架，我想听听一些指示从哪里开始。

1. 您对这些或其他类似框架的体验如何？
2. 您是否建议使用符合我要求的特定框架？

解决方案

我最终使用了Foundation，这显然是这场比赛的胜利者 - 以我的拙见。

更新2

Bootstrap 3现在是一场真正的竞争，因为它也支持语义网格类。它支持SASS和LESS。

Answer 1

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

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