网格系统的布局/使用

时间:2015-01-20 00:44:36

标签: html css grid-layout

您好我正在创建一个网站(谁不是?)。我的网站设计看起来像这样:

桌面版: Desktop Version 移动版: mobile Version

(抱歉大图)

正如你所看到的,并没有太大的变化。

  1. 在移动版本中禁用补充工具栏和全局导航(通过o / Off Canvas的Menü)

  2. 主要内容布局更改。

  3. 内容中的布局也会改变。 (使用网格系统中的嵌套Colums?)

  4. 我的问题是:我应该使用网格系统吗?如果是:我应该将它用于橙色内容区域还是洞穴网站?

    补充:网站应该已满!

1 个答案:

答案 0 :(得分:1)

正如mmgross所说,你提出了一个非常广泛的问题,归结为设计的品味和经验。

有许多工具和框架可供您访问已定义的网格系统; Bootstrap可能是最知名的,但基础CSS变得非常流行并且重量更轻。如果你不打算做太多错综复杂的造型而只想要一个预先存在的网格,我个人的选择就是Skeleton - 它非常轻巧,但却增加了你[可能]正在寻找的网格/响应能力。

这提出了另一个要点:您使用HTML / CSS的经验如何?使用网格的一个重要好处是,无需编写大量媒体查询即可获得响应。尽管如此,你还是必须至少编写一个媒体查询来检测是否是移动设备,所以如果你对CSS中的位置感到满意,那么最好只需要传递网格并自己编写(查看你的布局,这是我可能做的事情)。

在执行任务所花费的时间和学习新内容所需的时间之间总是需要权衡,所以请记住,某些框架的学习曲线可能比您想象的要陡峭。再说一次,如果您有使用它们的经验,那么坚持使用您所知道的东西可能比使用原始CSS更容易。

希望有所帮助!