响应式网格布局框架 [英] Responsive Grid Layout Framework

问题描述

我想要一个易于使用的网格框架为我当前的web项目。这些是我会欣赏的功能：

• 流体网格布局：可以水平对齐每个都具有相同的高度（例如3列布局），以100％宽度工作


• 响应速度：调整浏览器窗口时自动适应


• 移动设备：显示手机和手机的替代配件布局


• ：可以动态调整图片大小（例如全幅图片库） 图片大小：可选择动态调整文字大小（例如全角标题） li>
  
• 断点：可选择定义触发更改布局的事件的宽度值（例如，如果宽度低于阈值则移除按钮）

更新

我发现了许多网格，但将其缩小为以下三个有前景的框架非常适合我的需求：

• 基金


• 语义网格


• 金格网系统

以下是所有其他人：

• CSS网格 （不是流畅的）


• 320 and Up （不流畅）


• Columnal （不流畅）


• 骷髅 （不流畅）


• SimpleGrid （不流畅）


• Less框架 （不流畅）


• Bootstrap （非语义类）


• Breakpoints.js （只有断点，与媒体查询太相似）


• 自适应图片 （仅图片）


• FitText （仅文字）


• < s> 网格 （商业）


• HTML5 Boilerplate （旧）

通常，我会在这里询问之前自己测试，这样我可以制定更具体的问题。

1. 您的体验如何？

>



解决方案





我最后使用 基金会 这显然是这场比赛的胜利者。





更新2





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

解决方案

我之前使用过列表，它提供了大部分的功能除了断点功能。
它很容易使用，是自适应的。在移动屏幕中，网格降级为堆栈，因此所有的列内容一个在另一个之下。
然而，对于智能适配功能，正如您在断点功能中所概述的：我强烈建议您直接使用CSS 3媒体查询，因为这正是他们的意图，他们不难使用。提供这些功能的CSS框架仅使用媒体查询。





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




I want an easy to use grid framework for my current web project. These are the features i would appreciate:

• fluid grid layout: boxes that can be aligned horizontally (side by side), each having the same height (for example a 3-column layout), working with 100% width
• responsiveness: adapts automatically when resizing the browser window
• mobile devices: shows an alternate fitting layout for pads and mobile phones
• text size: optionally adjust text sizes dynamically (for example full width headlines)
• image size: optionally adjust images sizes dynamically (for example full width image galleries)
• breakpoints: optionally define width values which trigger events which alter the layout (for example removing buttons if the width is fallen below a threshold)

Update

I found many grids, but narrowed it down to the following three promising frameworks that might be a good fit for my requirements:

• Foundation
• Semantic Grid
• Golden Grid System

Here are all the others:

• CSS Grid (not fluid)
• 320 and Up (not fluid)
• Columnal (not fluid)
• Skeleton (not fluid)
• SimpleGrid (not fluid)
• Less Framework (not fluid)
• Bootstrap (non-semantic classes)
• Breakpoints.js (only breakpoints, too similar to media queries)
• Adaptive images (only images)
• FitText (only text)
• Gridset (commercial)
• HTML5 Boilerplate (old)

Normally, i would test them myself before asking here so that i can formulate more specific questions. But due to the vast amount of frameworks i'd like to hear some pointers where to begin.

1. How are your experiences with these or other similar frameworks?
2. Do you recommend a specific framework that matches my requirements?

Solution

I ended up using Foundation which is clearly the winner in this race - in my humble opinion.

Update 2

Bootstrap 3 is a real competition now, because it supports semantic grid classes too. And it supports SASS as well as LESS.

解决方案

I have used columnal priorly and it does provide most of the functionality that you want apart from the breakpoints feature. It is easy to use and is adaptive. In mobile screens the grids degrades to a stack so all the column contents are shown one under the other. However for the intelligent adaption feature, as you have outlined in the breakpoints feature : I would very strongly recommend you to use the CSS 3 media queries directly because that is exactly what they are meant for and they are not difficult to use. The CSS frameworks which provide these features under the sheets utilize media queries only.

Taking a look at http://twitter.github.com/bootstrap/scaffolding.html#responsive , Bootstrap's fluid grid does provide some convenient shortcuts for setting css properties for specific screen sizes which are not present in columnal.

这篇关于响应式网格布局框架的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！