使MetroJS響應

Question

我正在使用MetroJS（http://www.drewgreenwell.com/projects/metrojs）及其運行良好。 但現在我想讓Metro佈局能夠響應移動設備等等。

通常我會說我用@media標記重新排列了瓷磚。但是由於關於圖塊大小的屬性在類標籤中，它不是以這種方式工作或？

<div class="tiles tile-group five-tall six-wide">

此外，同時調整窗口大小比如上例中這將是真棒做一個動畫： http://themeforest.net/item/matrix-responsive-tilebased-template/full_screen_preview/2761654

有沒有人有一個想法？

Answer 1

如果您希望爲不同大小的屏幕創建不同的大小，可以使用主題生成器來執行此操作。只需點擊大小選項下的「添加」，它將爲您創建一個新的媒體查詢。 http://www.drewgreenwell.com/projects/metrojs/theme-generator

.live-tile可以根據您希望實現的自己的響應速度進行調整。我開始了一個平鋪佈局的響應式版本，但沒有時間來完成它或測試足以將其包含在發行版中。 http://www.drewgreenwell.com/scripts/metrojs/src/css/responsive.css 當我走向GSAP時，我計劃從一開始就建立響應式而非適應性。

如果您希望在調整瀏覽器窗口大小時動態調整切片的運動（很好，但很有用？），那麼我會推薦使用類似於Isotope或Masonry等的佈局。

• 同位素http://isotope.metafizzy.co/
• 砌體http://masonry.desandro.com/

也許值得指出的是您正在使用地鐵JS（LiveTile）砌體的佈局鏈接的主題