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

Question

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

• 移动浏览器（iPhone，Android）
• iPad或Android桌面或Kindle Fire
• 缩小浏览器窗口（safari，chrome，即firefox，operta等）
• 全屏浏览器窗口

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

  

div class =“tile grid_4”

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

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

执行此操作的一个网站是http://pinterest.com

要查看每个图块的内容，请查看http://jsfiddle.net/hagope/76jjp/

Answer 1

看看CSS3 media queries。我建议你阅读A List Apart关于 Responsive Web Design 的精彩文章，该文章涵盖了主题并且是一个很好的起点。

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

希望这有帮助。

Answer 2

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

以下是一个示例：http://gpittarelli.com/so_examples/inline_tiles.htm