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

标签 css grid responsive-design media-queries fluid

请原谅我,但是有人可以向我解释一下 Fluid Grid 的用途吗,例如 cssgrid 上的特色。通过网格,我指的是那些列,有的是9列,有的是12列,有的是24列...

1).网格是否用作背景或模板,以正确调整 DIVS 的大小和位置?

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

3).例如,列数之间有什么区别,为什么我要使用 9 列而不是 24 列。列数越高,内容越多越好吗?

4).为什么有这么多 Fluid Grid 生成器可用?是因为每个人都更好还是在某些方面不同?

谢谢

最佳答案

1). Is the grid used as a background, or stencil, for the correct sizing and positioning of DIVS?

是的,差不多就是这样。您可以将网格想象成一个不可见的模板,以帮助调整 div 的大小和位置。由于您正在谈论响应式设计,因此网格列的宽度会有所不同,具体取决于浏览器浏览器窗口的宽度。

2). Is it essential that a fluid grid (9, 12, 24 columns) is used in designing for a Responsive website, or can I just use CSS3 and media queries to define break points?

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

3). What's the difference between the number of columns, and why would I use 9, instead of 24 columns, for example. Is a higher column count better for more content?

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

将手持设备的屏幕分成 9 个垂直列不是很有用

4). Why are there so many Fluid Grid generators available? Is it because each one is better or different in some way?

部分是个人喜好,您可能更喜欢其中一个选项,部分是不同的功能。一些框架,如 FoundationBootstrap附带许多额外的 CSS 样式以及您可能希望使用的其他 javascript 资源。

玩得开心......这是网页设计的有趣时刻!

关于css - 流体网格 - 如何在响应式网页设计中使用它们?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15604680/

相关文章:

html - 在输入 :focus using only css 上显示另一个容器

css - 如何移动表中的特定 td 元素

可在 Firefox 中使用的 HTML 电子邮件签名(图片相关)

css - 如何创建网格/平铺 View ?

php - 如何将 SQL-View 与 PQGrid 结合使用并保存到数据库

javascript - 具有可变行/列大小的 Jquery 移动响应网格

css - @media 有问题(最小宽度 : XXXpx) working for one id but not the other

c# - .Net开源网格计算库

css - 使用平板电脑的导航下拉菜单

html - 导航栏 - 如何使其响应