Question

框架：Meteor

我正在使用Handlebars向客户发送信息。

我将此布局定义为post.html：

<div class="card">
        <div class="card-image waves-effect waves-block waves-light">
            <img class="activator" src="{{image}}">
        </div>
        <div class="card-content">
            <span class="card-title activator grey-text text-darken-4"><a href="/{{slug}}">{{title}}</a><i class="mdi-navigation-more-vert right"></i></span>

        <div class="card-reveal">
            <span class="card-title grey-text text-darken-4">{{title}}<i class="mdi-navigation-close right"></i></span>
            <p class="tobeappeded">{{body}}</p>
        </div>
    </div>

注意Card布局。

现在这是响应和工作，我没有问题如何使其响应？它有效。

我想彻底改变这种布局，并在布局中使用其他元素。

我知道这可以通过操纵DOM和附加HTML来使用JS来完成，但是可以在没有JS的情况下实现吗？

或许，JS only用于查找屏幕大小或其他内容，如果是，则呈现布局编号1，否则会呈现布局编号2

[将其视为媒体查询，但对于HTML / JS]

您还可以考虑Fragments在Android中的运作方式。

Answer 1

您可以使用window.matchMedia()执行此操作，这基本上是javascript中的媒体查询。如果符合您的条件，则相应地加载模板。

https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia

为笔记本电脑和移动设备使用不同的元素？

1 个答案: