javascript - 响应式网格布局框架

Question

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

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

更新

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

• Foundation
• Semantic Grid
• Golden Grid System

以下是所有其他内容：

• CSS 网格（非流体）
• 320 及以上（非流体）
• 柱状（非流体）
• 骨架（非流体）
• SimpleGrid（非流体）
• 更少的框架（不流畅）
• Bootstrap（非语义类）
• Breakpoints.js（只有断点，和媒体查询太相似了）
• 自适应图像（仅图像）
• FitText（仅文本）
• 网格集（商业）
• HTML5 样板（旧）

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

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

解决方案

我最终使用了Foundationwhich 显然是这场比赛的赢家——以我的拙见。

更新 2

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

Answer 1

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

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