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

HTML/CSS - Floating images based on browser size

本文关键字：图像浏览器 CSS HTML 更新时间：2023-09-26

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

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

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

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

如果你把按钮display:inline-block它们就会在页面上流动。然后你只需要把所有东西都居中，你就完成了。看看这个小提琴的例子。

使用称为Web响应式设计的概念

指

http://msdn.microsoft.com/en-us/magazine/hh653584.aspxhttp://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

若要使应用适合多种设备屏幕尺寸...您可以使用 CSS 媒体查询

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