笔记本电脑和手机使用不同的元素？答案

【问题标题】：Using Different elements for Laptop and Mobile?笔记本电脑和手机使用不同的元素？
【发布时间】：2015-09-10 21:32:23
【问题描述】：

框架：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是only用于查找屏幕大小，如果是，则呈现布局号1，否则，它呈现布局号2。

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

您还可以考虑Fragments 在 Android 中的工作原理。

【问题讨论】：

你不只是在问如何用这个来隐藏/显示带有媒体查询的元素吗？这很简单。将两者都放在页面上。当屏幕宽度高于某个点时，显示您的备用。下面：展示卡片。
我将举一个简单的例子来说明这样做的一种方法：例如，我想在桌面上我的网站右上角显示头像并注销链接，但在移动端的菜单中.为头像制作一个模板并将其包含在两个地方。现在使用 css 类，例如<div class="hide mobile">{{> avatarTemplate }}</div> 和 <div class="hide desktop">{{> avatarTemplate }}</div>。如果屏幕尺寸不匹配，请使用 CSS 中的媒体查询设置 display:none。
@JoshBurgess 你打败了我 :)
我会尝试并让你知道。听起来很有希望。现在这个问题看起来也很简单。谢谢。
这就像魅力。谢谢。

标签： javascript jquery html css meteor

【解决方案1】：

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

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

【讨论】：