这几周我将创建一个响应式网页设计。我读过很多关于响应式网页设计的文章，其中一种方法是关于网格系统的。有 978 网格系统，或 12 列网格系统等。我只是不太确定它的用途，以及如何使用网站已经提供的文件来实现。网站示例：http://960.gs/
您能否向我解释一下 24 列网格、12 列网格、16 列网格等等之间的区别？
感谢您的建议。
【问题讨论】：
我是一名前端 Web 开发人员，虽然我设计了一些布局，但我绝不会声称自己是一名“专家设计师”。但我确实有很多实际使用 HTML、CSS3 和 Javascript 构建响应式设计的经验，所以这就是我下面的经验/cmets 的来源：
我也简要地阅读了网格系统，虽然它们很有用，但我并没有真正使用它们 - 响应式设计背后的基本思想是构建不需要固定大小的布局，然后将其组合起来使用媒体查询（“快照状态”）。对于网页，我通常有 3 种布局：移动版/小型版、中型和大型。每个可以缩放大约 250 像素的宽度（内容可以在其容器内动态扩展，图像可以放大等），然后当你变得太大时，你“捕捉”到下一个更大的布局。例如：
小布局：250px 到 450px（1 列）
中等布局：450px 到 800px（2 列）
大布局：800px 到 1300px（3 列）
这样一来，任何列都不会小于约 250 像素，也永远不会大于 450 像素，因此每列必须能够拉伸约 200 像素。
就我个人而言，我会从一些简单的东西开始，然后在你玩过一些之后，再阅读一些内容，也许可以尝试合并网格系统。
如果你真的想用 HTML/CSS3 构建前端，我会从使用 CSS3 flexbox 布局开始（如果你想支持 IE 和旧版浏览器，你也可以使用带有百分比的“float”，但是这有点困难）：
【讨论】：
通过网格系统，您可以通过将您的网站划分为不同的列以用于不同的移动设备，从而使网站具有响应性。下面是一些可以更好地解释你的例子
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
对于 24 和 16 格，您可以相应地划分。
I hope so that it may help you understand better.
【讨论】：