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

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了响应式网页设计网格系统实现相关的知识,希望对你有一定的参考价值。

这几周我即将创建一个响应式网页设计。我已经阅读了很多关于响应式网页设计的知识,其中一种方法是关于网格系统。有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.

以上是关于响应式网页设计网格系统实现的主要内容,如果未能解决你的问题,请参考以下文章

响应式网页设计

响应式设计的流动或固定网格系统,基于 Twitter Bootstrap

响应式设计中的第 n 个子“碰撞”/创建流体网格

如何用一简单的CSS制作响应式HTML网页

如何在网格系统中添加多个元素并使其响应

Bootstrap_响应式网格系统