responsive-design - 响应式网页设计网格系统实现

Question

这几周我将创建一个响应式网页设计。我读过很多关于响应式网页设计的文章，其中一种方法是关于网格系统的。有 978 网格系统，或 12 列网格系统等。我只是不太确定它的用途，以及如何使用网站已经提供的文件来实现。网站示例:http://960.gs/

您能否向我解释一下 24 列网格、12 列网格、16 列网格等等之间的区别？

感谢您的建议。

Answer 1

我是一名前端 Web 开发人员，虽然我设计了一些布局，但我绝不声称自己是“专家设计师”。但我确实有很多实际使用 HTML、CSS3 和 Javascript 构建响应式设计的经验，所以这就是我下面的经验/评论的来源:

我也简要地阅读了网格系统，虽然它们很有用，但我并没有真正使用它们——响应式设计背后的基本思想是构建不需要固定大小的布局，然后将其与媒体查询结合起来(“快照状态”)。对于网页，我通常有 3 种布局:移动版/小型版、中型和大型。每个可以缩放大约 250 像素的宽度(内容可以在其容器内动态扩展，图像可以放大等)，然后当你变得太大时，你“捕捉”到下一个更大的布局。例如:

小布局:250px 到 450px(1 列)

中等布局:450px 到 800px(2 列)

大布局:800px 到 1300px(3 列)

这样一来，任何列都不会小于 250 像素，也不会大于 450 像素，因此每列必须能够拉伸(stretch)约 200 像素。

就我个人而言，我会从这样简单的东西开始，然后在你玩过它之后，再阅读一些内容，也许尝试合并网格系统。

如果你真的想用 HTML/CSS3 构建前端，我会从使用 CSS3 flexbox 布局开始(如果你想支持 IE 和旧版浏览器，你也可以使用带有百分比的“float”，但这有点更加困难):

http://www.html5rocks.com/en/tutorials/flexbox/quick/