响应式网格布局框架

 

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

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

    • 更新

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

  • Foundation
  • Semantic Grid
  • Golden Grid System

    • 这里是所有其他人：

  • CSS网格（不流畅）
  • 320和以上（不流体）
  • Columnnal（不是流体）
  • 骨架（不流体）
  • SimpleGrid（不流畅）
  • 较少的框架（不流体）
  • Bootstrap（非语义类）
  • Breakpoints.js（只有断点，与媒体查询太相似）
  • 自适应图像（仅限图像）
  • FitText（仅文本）
  • Gridset（商业）
  • HTML5 Boilerplate（旧）

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

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

    • 解

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

    更新2

    引导3现在是一个真正的竞争，因为它也支持语义网格类。 它支持SASS以及LESS。

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

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

    链接地址: http://www.djcxy.com/p/88313.html

    上一篇: Responsive Grid Layout Framework

    下一篇: Twitter Bootstrap Media Grid: square box with images