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

我正在使用 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

有人有想法吗?

【问题讨论】:

    标签: 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 之类的东西进行布局。

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

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2018-07-06
      • 2019-12-05
      • 2012-10-13
      • 2019-12-02
      • 2020-12-06
      • 1970-01-01
      • 2023-03-31
      • 1970-01-01
      相关资源
      最近更新 更多