Question

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

你能不能向我解释一下24列网格，12列网格，16列网格等等之间的区别是什么？

感谢您的建议。

Answer 1

我是前端Web开发人员，虽然我设计了一些布局，但我并不认为自己是“专家设计师”。但我确实有很多经验可以用HTML，CSS3和Javascript构建响应式设计，所以我的经验/评论来自于：

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

小布局：250px到450px（1列）
中等布局：450px到800px（2列）
大布局：800px到1300px（3列）

这样，任何色谱柱都不会小于250px，也不会大于450px，因此每个色谱柱必须能够伸展大约200px。

就我个人而言，我只是从简单的事情开始，然后在你玩了一些之后再读一些，然后再试一下网格系统。

如果你想在HTML / CSS3中实际构建前端，我首先要使用CSS3 flexbox布局（如果你想支持IE和旧浏览器，你也可以使用百分比“浮动”但是这有点困难）：

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

Answer 2

通过网格系统，您可以通过将网站分为不同移动设备的不同列来使网站响应。以下是一些可能会更好地解释您的示例

.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.

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

2 个答案: