让 MetroJS 响应式

【问题标题】：Make MetroJS responsive让 MetroJS 响应式
【发布时间】：2016-06-14 14:04:07
【问题描述】：

我正在使用 MetroJS (http://www.drewgreenwell.com/projects/metrojs)，它运行良好。但现在我想让 Metro 布局响应移动设备等。

通常我会说我用@media 标签重新排列图块。但是由于关于瓷砖大小的属性在类标签中，它不能以这种方式工作，还是？

&lt;div class="tiles tile-group five-tall six-wide"&gt;

此外，在调整窗口大小的同时制作动画会很棒，如示例中所示： http://themeforest.net/item/matrix-responsive-tilebased-template/full_screen_preview/2761654

有人有想法吗？

【问题讨论】：

标签： javascript jquery responsive-design microsoft-metro

【解决方案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/

可能值得注意的是，您链接的主题是使用带有 Masonry 的 Metro JS (LiveTile) 进行布局

【讨论】：