网格系统的布局/使用

Layout / Use of Grid System

您好,我正在创建一个网站(谁不是?)。我的网站设计如下所示:

桌面版: 手机版:

(大图抱歉)

如您所见,变化不大。

  1. 侧边栏和全局导航在移动版中被禁用(菜单来自 o/Off Canvas)

  2. 主要内容布局发生变化。

  3. 内容 div 中的布局也发生了变化。 (在网格系统中使用嵌套列?)

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

补充:网站应该是完整的!

正如 mmgross 所说,您问的是一个非常宽泛的问题,归结为设计品味和经验。

有许多工具和框架可让您访问已定义的网格系统; Bootstrap 可能是最著名的,但 Foundation CSS 正变得非常流行并且重量更轻。如果您不打算做太多复杂的样式,而只是想要一个预先存在的网格,我个人的选择是 Skeleton - 它非常轻巧,但添加了您 [可能] 正在寻找的 grid/responsiveness。

这引出了另一个要点:您使用 HTML/CSS 的经验如何?使用网格的一大好处是无需编写大量媒体查询即可获得响应能力。不过,您至少必须编写一个媒体查询来检测移动设备,所以如果您对 CSS 中的位置感到满意,那么最好只是跳过网格并自己编写所有内容(查看你的布局,这就是我可能会做的)。

完成任务所花费的时间与学习新事物所花费的时间之间始终需要权衡取舍,因此请记住,某些框架的学习曲线可能比您想象的更陡峭。话又说回来,如果你有使用它们的经验,那么坚持你所知道的比玩弄原始的 CSS.

可能更容易。

希望对您有所帮助!