HTML / CSS-根據瀏覽器大小浮動圖像

Question

我正在嘗試創建一個具有跨瀏覽器兼容性的HTML5應用-理想地用於移動設備。 我正在使用HTML5 / CSS3 / JavaScript / jQuery（帶有移動設備）。

我的主頁必須是六個以頁面為中心的方形按鈕（圖像），因此，如果您想象一個移動屏幕，該屏幕在中心有兩列，每列三個正方形。

我希望有更多經驗的人能夠指導我解決哪個問題的最佳方法？ 如果將屏幕水平旋轉，圖像會浮動到3列（共2列）中，這很酷。

如果有人有任何想法，我將非常感謝。 抱歉，我的描述有點簡短，但是我還沒有編寫代碼，我想首先看看人們的想法。 謝謝。

Answer 1

使用稱為Web響應設計的概念

參考

http://msdn.microsoft.com/zh-CN/magazine/hh653584.aspx http://johnpolacek.github.io/scrolldeck.js/decks/sensitive/ http://smallbiztrends.com/2013/05/什么-is-sensitive-web-design.html

范例網站

http://socialdriver.com/2013/06/50-best-sensitive-website-design-examples-of-2013/ http://socialmediatoday.com/jacey-gulden/1687451/10-examples-inspiring-response-網頁設計

Answer 2

要使您的應用適合多種設備屏幕尺寸...您可以使用CSS媒體查詢

您還可以指定百分比的布局/ btn大小以及媒體查詢的用法。

Answer 3

如果將按鈕display:inline-block它們將在頁面中流動。 然后，您只需要將所有內容居中即可完成。 查看這個小提琴作為示例。