根据不同大小的浏览器或移动屏幕动态重新排序切片

无论用什么屏幕来查看页面，我都希望尽可能多地显示图块。 不同的场景包括：

• 手机浏览器（iPhone，Android）
• iPad或Android桌面或Kindle Fire
• 狭窄的浏览器窗口（safari，chrome，即firefox，operta等）
• 全屏浏览器窗口

我想到的一个解决方案是使用960.gs和adaptive.js …但是，当我设置div的大小时，例如：

div class =“tile grid_4”

我注意到adaptive.js会调整tile的大小（因为不同的.css文件会调整列的大小）…但是，我需要保持固定的tile大小（310px X 450px）….

也许我需要动态重命名div类，以便列#g col width = 310px？

一个这样做的网站是http://pinterest.com

要查看每个瓷砖的外观，请查看http://jsfiddle.net/hagope/76jjp/

Answer 1

看看CSS3 媒体查询 。 我建议你阅读A List Apart关于响应式网页设计的精彩文章，该文章涵盖了主题并且是一个很好的起点。

在对基础进行排序后，您可以使用device-width查询来定位特定设备。 要定位高密度显示器（例如iPhone4的视网膜显示器），您可以查看device-pixel-ratio查询。

希望这可以帮助。

Answer 2

除非我误解了你想要的东西，否则这应该仅适用于CSS。 将每个图块设置为display: block （以及固定的宽度和高度），然后将每个图块包裹在display: inline; float: left; display: inline; float: left; 容器元素。 添加你想要的风格的CSS，它应该工作正常。

这是一个例子： http ： //gpittarelli.com/so_examples/inline_tiles.htm