Javascript 根据不同大小的浏览器或手机屏幕动态重新订购互动程序

无论使用什么屏幕来查看页面，我都希望显示尽可能多的磁贴。不同的情况包括：

• 移动浏览器（iPhone、Android）
• iPad或Android桌面或Kindle Fire
• 狭窄的浏览器窗口（safari、chrome、ie、firefox、operta等）
• 全屏浏览器窗口

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

div class=“瓷砖网格_4”

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

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

这样做的一个站点是

要查看每个磁贴的外观，请查看

---

除非我误解了您的需求，否则这应该只能通过CSS实现。将每个磁贴样式设置为

display:block

（以及固定的宽度和高度），然后将每个磁贴包装在

display:inline中；浮动：左容器元素。为样式添加任何您想要的CSS，它应该可以正常工作

这里有一个例子：
看看CSS3。我建议您阅读List Apart关于的精彩文章，这篇文章涵盖了这个主题，是一个很好的起点

在对基础知识进行排序后，可以使用查询将特定设备作为目标。要定位高密度显示器（例如iPhone4的视网膜显示器），您可以查看查询

希望这有帮助。
请在此处提供一些简化的HTML和CSS。（在我看来，您只需要为每个“平铺”设置一个
浮动：left
样式和一些边距。）Pinterest的做法与您应该做的不同，因为平铺的高度不同。更复杂的是，他们的解决方案将瓷砖排列成垂直列。乔治在下面的回答对于固定尺寸应该足够了。媒体查询非常好，并且得到了广泛的支持，但不要因此而忽略
float
。你想用
float
完成的事情很容易。这很好，问题是页面上的列没有居中（都是左边的）。有没有一个快速的CSS修复方法？当你试图容纳尽可能多的列时，如何使列居中？我不太确定你的目标是什么，但是你可以试着把瓷砖包在一个容器元素（
div
或者你喜欢的任何东西）中，并将容器居中。说真的，从ALA上看看这个。简单的浮动可以做很多事情，但最终，媒体查询的功能要强大得多。你不必担心Internet Explorer；您可以使用添加媒体查询支持。