5

我一直有点困惑响应式网页设计如何与960.gs等 CSS 网格系统一起使用。

Nathan Smith(创建者或 960.gs)不久前提出了 adapt.js,并通过检查捆绑的样式表(mobile.css 720.css960.css等等),很明显网格的数量列未受影响,只有各个列的宽度和它们堆叠在一起的方式发生了变化。

另一方面, 978.gs似乎遵循不同的模式:

  • 300px 网格有 8 列
  • 748px 和 978px 网格都有 12 列
  • 1218px 和 1378px 网格都有 16 列

起初,我认为这没有多大意义,所以我与开发人员讨论了它。他回答说服务不同的 CSS根据设备宽度不同的标记是常见的做法。

这种方法对我来说仍然有点奇怪,因为如果您愿意重写整个 HTML 标记,您不妨使用相同的网格系统(例如 16)并将所有.grid_{x}类更改为.grid_{x*2}为适应更小的屏幕......正确的?

adapt.js 方法似乎更容易实现和管理,但我也可以发现一些警告:图像或文本片段如何很好地适合grid_3类?因为它的宽度可以从auto,220px到 甚至610px2520.css

那么,目前关于响应式网页设计和网格系统的最佳实践是什么?CSS 媒体查询是否应该影响网格(列宽)?事实上,我倾向于相信最好的方法可能是提供单个标记和样式表,并让浏览器进行渲染/缩放。

我对此很陌生,因此感谢您提供任何帮助-谢谢。

4

0 回答 0