【问题标题】:Layout / Use of Grid System网格系统的布局/使用
【发布时间】:2015-01-20 10:00:34
【问题描述】:

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

桌面版: 手机版:

(对不起,大图)

如您所见,变化不大。

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

  2. 主要内容布局更改。

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

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

添加:网站应该是完整的!

【问题讨论】:

  • unsemantic.com 是推荐的网格系统吗?
  • 哇,这是一个非常广泛的问题,所以我只能给你一个同样广泛的答案:就个人而言,我认为你应该使用任何能让你满意的工作。看来您已经对可以使用的内容进行了一些思考,为什么不通过制作网站原型来进行测试?
  • 好的,谢谢你的回答

标签: html css grid-layout


【解决方案1】:

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

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

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

在完成任务所需的时间和学习新事物所需的时间之间总是需要权衡取舍,因此请记住,某些框架的学习曲线可能比您想象的要陡峭。再说一次,如果你有使用它们的经验,那么坚持你所知道的可能比玩原始 CSS 更容易。

希望有所帮助!

【讨论】:

  • 感谢您的回答!我也看过 Bootsrap,但我认为 ist 对那个项目有太多的开销。我的技能非常好(我自己学习这一切),我只是缺少经验。我现在选择下载非语义的并将内容放在其中。在更改了一些媒体查询后,它对我来说效果很好!
  • 很高兴听到!那里有很多非常重的,所以很高兴听到你找到了一个适合你的需求并让它工作的。祝网站好运!
猜你喜欢
  • 2019-08-19
  • 2016-10-02
  • 2014-11-07
  • 1970-01-01
  • 1970-01-01
  • 2018-08-14
  • 1970-01-01
  • 1970-01-01
  • 2018-01-13
相关资源
最近更新 更多