javascript - 响应式网格布局框架

Question

就目前而言，这个问题不适合我们的问答形式。我们希望答案得到事实、引用资料或专业知识的支持，但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开，visit the help center寻求指导。




10年前关闭。




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

流体网格布局 :可以水平对齐(并排)的框，每个具有相同的高度(例如 3 列布局)，使用 100% 宽度

响应能力 : 调整浏览器窗口大小时自动适应

移动设备 : 显示垫和手机的替代装配布局

文字大小 : 可选择动态调整文本大小(例如全 Angular 标题)

图片大小 : 可选择动态调整图片尺寸(例如全宽图片库)

断点 : 可选定义触发改变布局的事件的宽度值(例如，如果宽度低于阈值，则删除按钮)

更新

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

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 (旧)

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

您对这些或其他类似框架的体验如何？

你推荐一个符合我要求的特定框架吗？

解决方案

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

更新 2

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

Answer 1

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

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