响应式网格布局框架

Question

我想为我当前的Web项目使用易于使用的网格框架.以下是我将欣赏的功能:

• 流体网格布局:可以水平对齐(并排)的盒子,每个都具有相同的高度(例如3列布局),工作宽度为100%
• 响应性:在调整浏览器窗口大小时自动调整
• 移动设备:显示垫和手机的备用配件布局
• 文本大小:可选择动态调整文本大小(例如全宽标题)
• 图像大小:可选择动态调整图像大小(例如全宽图像库)
• 断点:可选择定义宽度值,触发更改布局的事件(例如,如果宽度低于阈值,则删除按钮)

更新

我找到了许多网格,但将其缩小到以下三个有希望的框架,这些框架可能非常适合我的要求:

• Foundation
• Semantic Grid
• Golden Grid System

以下是其他所有内容:

• CSS Grid(不流畅)
• 320及以上(不流动)
• 柱状(不流动)
• 骨架(不流畅)
• SimpleGrid(不流畅)
• 较少的框架(不流动)
• Bootstrap(非语义类)
• Breakpoints.js(仅限断点,与媒体查询太相似)
• 自适应图像(仅图像)
• FitText(仅文字)
• 网格集(商业)
• HTML5 Boilerplate(旧)

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

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

解

我结束了使用Foundation,这显然是这场比赛的胜利者 - 以我的拙见.

更新2

Bootstrap 3现在是一个真正的竞争对手,因为它也支持语义网格类.它支持SASS和LESS.

Answer 1

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

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