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

Posted 2021-05-02

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

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

感谢您的建议。

答案

我是一名前端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/

另一答案

通过网格系统，您可以通过将网站划分为不同的移动设备列来使网站响应。以下几个例子可以更好地解释你

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