响应式网格布局框架

15

我希望我的当前网站项目能够使用易用的网格框架。以下是我需要的功能:

  • 流式网格布局:可以水平对齐的盒子(例如三列布局),每个盒子具有相同的高度,宽度为100%
  • 响应式设计:自动适应浏览器窗口大小调整
  • 移动设备适配:针对平板电脑和手机显示合适的替代布局
  • 文本大小可选调整:可选地动态调整文本大小(例如全屏宽的标题)
  • 图片大小可选调整:可选地动态调整图像大小(例如全屏宽的图库)
  • 断点设置:可选地定义宽度值,触发事件以更改布局(例如当宽度低于阈值时删除按钮)

更新

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

以下是其他所有框架:

  • SimpleGrid (非自适应)
  • Less Framework (非自适应)
  • Bootstrap (非语义化类)
  • Breakpoints.js (仅限断点,与媒体查询太相似)
  • Adaptive images (仅限图片)
  • FitText (仅限文字)
  • Gridset (商业性质)
  • HTML5 Boilerplate (已过时)
  • 通常情况下,我会先测试这些框架,然后在此处提问以便我可以提出更具体的问题。但由于我希望了解的框架数量很多,因此我想听听一些指针从何处开始。

    1. 您对这些或其他类似框架有何经验?
    2. 您推荐符合我的要求的特定框架吗?

    解决方案

    我最终使用了Foundation,在我看来,它显然是这场比赛的赢家。

    更新 2

    Bootstrap 3现在是真正的竞争者,因为它也支持语义化网格类。而且它支持SASS以及LESS。

    1个回答

    1

    我之前使用过Columnal,它提供了除了断点特性以外的大部分功能。它易于使用且具有适应性。在移动屏幕上,网格会降级为堆栈,因此所有列内容都会一个接一个地显示。

    然而,对于您在断点特性中所概述的智能适应特性,我强烈建议您直接使用CSS 3媒体查询,因为这正是它们的用途,而且它们并不难使用。提供这些特性的CSS框架仅利用媒体查询。

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


    我尝试了Columnal,但它似乎不支持流式网格/列。它总是定义一个最大宽度。我希望能找到一种创建流式布局以支持更大分辨率的方法。 - Alp

    网页内容由stack overflow 提供, 点击上面的
    可以查看英文原文,
    原文链接