1. 简介
@polymer/iron-media-query 是一个 Polymer 元素，用于在 Web 应用程序中创建可响应式的布局和样式。该元素可以帮助我们在指定的屏幕宽度下更新 Web 应用程序的样式和布局。它支持多个不同的屏幕宽度和媒体查询。
2. 安装
在安装 @polymer/iron-media-query 之前，您需要先安装 Node.js。然后在命令行中输入以下命令安装：
npm install @polymer/iron-media-query
安装完成后，您可以在任何 Polymer 应用程序中使用该元素。
3. 使用
3.1 在 HTML 中使用
在 HTML 中，您可以像以下这样使用该元素：
<iron-media-query query="(max-width: 600px)" query-matches="{{smallScreen}}"></iron-media-query>在上面的代码中，我们定义了一个媒体查询，当屏幕宽度小于或等于 600px 时，query-matches 属性将被设置为 true，这意味着我们可以在 Web 应用程序中使用它来更新样式和布局。
3.2 在 JavaScript 中使用
您还可以在 JavaScript 中使用该元素。首先，导入该元素：
import '@polymer/iron-media-query/iron-media-query.js';
然后，您可以在 JavaScript 中使用该元素：
const query = window.matchMedia('(max-width: 600px)');
const ironMediaQuery = document.createElement('iron-media-query');
ironMediaQuery.query = query;
ironMediaQuery.addEventListener('query-matches-changed', (event) => {
console.log(event.detail.value);
});在上面的代码中，我们先使用 window.matchMedia() 创建了一个媒体查询，然后使用 document.createElement() 创建了一个 iron-media-query 元素，并将 query 设置为我们刚刚创建的媒体查询。
最后，我们添加了一个 query-matches-changed 事件监听器，当查询匹配状态改变时，事件处理程序将被调用，并在控制台中输出当前的匹配状态。
4. 示例
下面是一个使用 @polymer/iron-media-query 元素的示例：
-- -------------------- ---- ------- ----------------- ------------------ ------- --------------------------------------------------- --------- --------------------- --------- ---------- ----------- --------- ---------------------- --------- ---------- -----------
上面的代码中，我们定义了一个带有 query 属性的 iron-media-query 元素，并将其绑定到 smallScreen 属性。接着，我们使用 template 元素根据不同的屏幕宽度条件来显示不同的文本内容。
5. 结论
@polymer/iron-media-query 是一个强大的 Polymer 元素，它可以帮助我们创建可响应式的布局和样式。在本文中，我们介绍了如何安装和使用该元素，以及如何在 HTML 和 JavaScript 中使用它。我们还展示了一个使用示例，希望这能帮助您更好地理解该元素的使用方式。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f7580cba9b7065299ccbccb