响应式网格网页设计

Ali*_*xel 5 html css 960.gs media-queries responsive-design

我对网页设计与960.gs等CSS网格系统的响应速度有点混淆.

Nathan Smith(创作者或960.gs)前段时间提出了adapt.js,通过检查捆绑的样式表(mobile.css,720.css和960.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甚至610px在2520.css变种?

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

我对此非常环保,所以感谢任何帮助 - 谢谢.