使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）砌体的布局链接的主题