问题标签 [enquire.js]

我正在使用Enquire.js和Vue.js来查询浏览器的大小并相应地更新两个数据属性。所以，如果我这样做：

它将在控制台中输出正确的消息（此处为 jsfiddle ），但不会更改displayIsLargeand的值displayIsSmall。我在这里想念什么？

我正在使用Enquire.js和Vue.js进行媒体查询。当我手动调整浏览器窗口的大小时，这一切都非常有效。但是，我在文档加载方面没有得到匹配，这是一种奇怪的行为，在打开Chrome 的切换设备模式或在手机上访问网站时最为明显。我检查了“匹配和不匹配示例”，它在所述模式下或使用手机访问时按预期工作。我想知道Vue.js和Enquire.js之间是否存在某种不兼容，或者我做错了什么？

媒体查询的逻辑在我的 vue 实例的 ready 钩子上：

在我的 vue 实例上，我有以下数据属性：

在我的 html 文件中，我使用v-if="displayIsSmall"andv-if="displayIsLarge"来根据浏览器的大小隐藏/显示元素。JsdFiddle在这里。

与此同时，我想到，我也许可以通过Setup回调解决这个问题，也许有条件，像这样：

这没有按预期工作。我错过了什么？JsdFiddle在这里。

更新

Vue 的beforeCompile或创建的钩子（而不是ready）都没有运气。

我试图对不同的断点产生各种影响。

主要我想做的是，当从720px 内的类别列表中单击一个类别时，类别列表应该淡出并且应该在该位置显示数据但是当宽度超过 720px时，类别列表不应该淡出而不是显示另一个 div 中的数据。

现在正在控制台中记录响应。

问题

每当页面以特定宽度加载时，不会执行单击，但是一旦我在其上调整浏览器的大小，单击就会开始注册。

我知道细节可能还不够，但仍然..

JS

我正在尝试让 Enquire.js 与 fullpage.js 一起工作。

我在 afterLoad 上为一些元素制作动画，并希望这些动画在移动设备上有所不同。

这是一个不带查询的 afterLoad 示例：

我用 Inquire 的目标是这个

但这似乎不起作用。它只会触发匹配的，而不会触发无与伦比的，为什么？如果我输入控制台日志或警报，两者都会触发。

我知道网站的布局和功能应该严格分开。布局应该用CSS来完成，网站的功能，比如点击展开移动菜单，应该用JS来完成。参考资料：1。& 2。

我经常看到响应式布局发生的情况是为各种媒体查询提供列类，其中只有类名不同，但宽度值是相同的。

这会导致 HTML 格式为

是否可以接受，而不是总是为各种媒体查询的列定义相同的宽度，而只是制作一个最小的 CSS 网格，其中列类宽度定义一次，然后使用 Enquire 动态传递每个媒体查询的宽度？

我知道这破坏了上述与布局 (CSS) 和函数 (JS) 的分离，尽管这意味着更干净的 HTML，并且每个媒体查询都会加上更少的 CSS。每个媒体查询也只调用一次查询，因此使用最小的 CSS 文件对下载量的影响也将大大减少。是的，当然，这意味着该站点依赖于 JS。

我想在我的 Vue.js(v 2.0) 项目中使用 Enquire.js。互联网上有很多用户将 Inquire 与 Vue.js 集成的示例。例如这里：https ://jsfiddle.net/Linusborg/843dk9zs/

当我将 Enquire.js 集成到我的 Vue.js/webpack 项目中时，它不起作用并且在控制台中根本没有给出任何错误消息。我不知道我在这里做错了什么。

这是我的代码，位于 main.js 我的应用程序的根文件中。

我目前正在使用 enquire.js 来识别我的媒体查询，这些查询是：

我需要我的 js 为 medium_devices 触发，所以我写道：

所以从 0 到 767 我是无与伦比的。从 768 开始，我得到了匹配。问题是我希望 unmatch 也以 992px 触发。所以基本上我需要我的脚本从 768 到 991 工作，所以我需要识别“活动”媒体查询而不是 macth。任何想法如何解决这个问题？谢谢

我会在 Drupal 8 主题中使用这个 JS 库。所以我在我的项目中添加了它，然后在我的主题中添加了它：libraries.yml

然后加载 vi amy info.yml：

在我的 js 文件中：

但是我的 android Tab 上什么也没发生。

可能缺少什么？谢谢

我有一个脚本，我在 Git 提交期间运行，以使用 Husky 的commit-msg钩子获取当前提交消息，并使用该脚本发出 HTTP 请求。我的挑战是在 Husky 钩子脚本完成后运行另一个脚本。我要运行的脚本使用Enquirer NPM 包。我尝试在 Husky 的钩子中运行包含 Enquirer 代码的脚本，post-commit但发生的情况是两个脚本同时运行，第二个脚本以 退出commit-msg，所以我想要一种方法等待commit-msg完全完成然后我用 Enquirer 运行那个。我尝试通过关注此线程来解决问题，但子进程也以commit-msg. 输出看起来像

关于如何规避这个问题的任何想法？谢谢。

下面是哈士奇的配置

源代码

我的代码不会运行，只会在崩溃前显示一个临时的黑屏。