HTML/CSS - 基于浏览器大小的浮动图像

Question

我正在尝试创建一个具有跨浏览器兼容性的 HTML5 应用程序 - 非常适合移动设备。我正在使用 HTML5/CSS3/JavaScript/jQuery（带有移动设备）。

我的主页需要是六个以页面为中心的方形按钮（图像），所以如果您想象一个有两列的移动屏幕，每列三个正方形，在中心。

我希望有更多经验的人能够指导我解决这个问题的最佳方法是什么？如果屏幕水平转动，图像会浮动成 3 列，每列 2 列，那就太酷了。

如果有人有任何想法，我将不胜感激。抱歉，我的描述有点简短，但我还没有编写代码，我想先看看人们的想法。谢谢。

Answer 1

如果您制作按钮display:inline-block，它们将在页面上流动。然后你只需要把所有东西都放在中心，你就完成了。以fiddle 为例。

Answer 2

使用名为web responsive design的概念

参考

http://msdn.microsoft.com/en-us/magazine/hh653584.aspx http://johnpolacek.github.io/scrolldeck.js/decks/responsive/ http://smallbiztrends.com/2013/05/what-is-responsive-web-design.html

示例网站

http://socialdriver.com/2013/06/50-best-responsive-website-design-examples-of-2013/ http://socialmediatoday.com/jacey-gulden/1687451/10-examples-inspiring-responsive-web-design

Answer 3

要使您的应用适用于多种设备屏幕尺寸...您可以使用css media queries

您还可以指定布局/btn 大小的百分比以及媒体查询的使用情况。