流体网格 - 如何在响应式Web设计中使用它们?

时间:2013-03-24 22:14:28

标签: css3 grid responsive-design media-queries fluid

请原谅我,但有人可以向我解释流体网格的目的,例如cssgrid上的特色。通过网格,我指的是那些列,一些是9,其他12,其他24列......

1)。网格是用作DIVS的正确尺寸和位置的背景或模板吗?

2)。在响应式网站的设计中使用流体网格(9,12,24列)是否必要,或者我可以使用CSS3和媒体查询来定义断点吗?

3)。列数之间有什么区别,为什么我会使用9而不是24列。对于更多内容,更高的列数会更好吗?

4)。为什么有这么多流体网格发生器?是因为每个人在某种程度上更好还是不同?

谢谢

2 个答案:

答案 0 :(得分:2)

  

1)。网格是用作DIVS的正确尺寸和位置的背景或模板吗?

是的,这或多或少都是。你可以将网格描绘成一个看不见的模板,以帮助div的大小和位置。由于您正在谈论响应式设计,因此网格列的宽度会有所不同,具体取决于veiwer浏览器窗口的宽度。

  

2)。在响应式网站的设计中使用流体网格(9,12,24列)是否必要,或者我可以只使用CSS3和媒体查询来定义断点?

网格旨在简化您的生活,但没有什么可以阻止您推出自己的解决方案,或将自定义CSS样式与现成的流体网格框架混合

  

3)。列数之间有什么区别,为什么我会使用9而不是24列。更高的列数是否更适合更多内容?

您可以想象对于给定的窗口宽度,更多列=更窄的列。您可能会发现更多列可以更好地控制给定的页面布局,这取决于项目的具体情况。实际上,由于每个网格列之间的装订线或间距,更多列实际上会为内容提供更少的空间。如果您正在考虑包括移动设备在内的resoponsive设计,那么在某些时候,大多数网格框架都会开始将列显示为垂直堆栈,即:
1-2-3
成为
1
2
3

将手持屏幕划分为9个垂直列并不是非常有用

  

4)。为什么有这么多流体网格发生器?是因为每个人在某种程度上更好还是不同?

部分个人偏好,您可能喜欢一种选择而不是另一种选择,部分不同的功能。某些框架(如FoundationBootstrap)附带了许多额外的CSS样式以及您可能希望使用的其他JavaScript资源。

玩得开心......对于网页设计来说这是一个有趣的时刻!

答案 1 :(得分:1)

与ETHAN MARCOTTE - Alist Apart on RWD.

深入了解