响应网格布局框架(闭合)(Responsive Grid Layout Framework [clo

2019-07-29 13:35发布

我想要一个易于使用的网格框架我目前的Web项目。 这是我将不胜感激的特点:

  • 流体网格布局 :其可以水平对齐盒(并排),每一个都具有相同的高度(例如,3列布局)中,用100%的宽度的工作
  • 响应 :调整浏览器窗口时自动适应
  • 移动设备 :示出了用于焊盘和手机的备用配件布局
  • 文字大小 :有选择地调整文本的大小动态地(例如全宽标题)
  • 图像尺寸 :有选择地调整图像的大小动态地(例如全宽图像画廊)
  • 断点 :任选定义哪个触发,其改变的布局(例如删除按钮如果宽度降至低于阈值)事件宽度值

更新

我发现了许多网格,但范围缩小到以下三个有希望的框架,这可能是一个非常适合我的要求:

  • Foundation
  • Semantic Grid
  • Golden Grid System

这里是所有的人:

  • CSS网格 (未液)
  • 320和向上 (未流体)
  • Columnal (未流体)
  • 骨架 (未流体)
  • SimpleGrid (未流体)
  • 减框架 (非流体)
  • 自举 (非语义类别)
  • Breakpoints.js (仅断点,太相似了媒体查询)
  • 自适应图像 (仅适用于图像)
  • FitText (纯文本)
  • Gridset (商业)
  • HTML5的样板 (旧)

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

  1. 如何与这些或其他类似的框架您的经验?
  2. 你建议符合我的要求,具体的框架?

我结束了使用Foundation ,这显然是在这场比赛的赢家-在我的愚见。

更新2

引导3是一个真正的竞争,现在,因为它支持语义网格类了。 它支持SASS和LESS。

Answer 1:

我已经使用columnal priorly,它并提供了大部分你想除了断点功能的功能。 这是很容易使用,并且是自适应的。 在移动设备的屏幕格栅降低到堆栈所以所有的列的内容被示出一个在另一个之下。 不过,对于智能自适应功能,当你在断点所概述的特点:我会强烈建议您直接使用CSS 3个媒体查询,因为这正是他们都是为了他们不是很难使用。 它提供床单下这些功能的CSS框架仅利用媒体查询。

考虑看看http://twitter.github.com/bootstrap/scaffolding.html#responsive ,引导的流体网格并针对特定的屏幕尺寸,其不存在于columnal设置CSS属性提供一些方便的快捷方式。



文章来源: Responsive Grid Layout Framework [closed]