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

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 布局。

现在这是响应式的并且有效，我没有问题如何让它响应？它有效。

我想完全改变这个布局，并在布局中使用其他元素。

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

也许，JS 仅用于查找屏幕尺寸或其他内容，如果是，则呈现布局编号1，否则呈现布局编号 2。

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

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

Answer 1

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

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