问题标签 [enquire.js]

我正在尝试为我的 reactjs 应用程序实现服务器端渲染。我正在使用 webpack 构建 reactjs 应用程序，增强解析来处理 nodejs 中 jsx 文件的导入。

我的应用程序依赖于第三方库，如 enquire.js。当 react 应用程序尝试在 nodejs 上导入 enquire.js 时，它失败并出现错误 ReferenceError: window is not defined

由于 window 对象不可用 nodejs 如何处理使用 window 进行服务器端渲染的库？

我有一个元素，作为响应式设计的一部分，它必须移动到我页面上的不同部分。

如我所见，我有 2 个解决方案

(i) 有一个重复的元素并在 css 中使用可见性。

(ii) 使用 enquire.js 并移动元素。

选项 1 更容易，但是否存在重复标记来完成此任务的问题？我相信如果一个元素必须移动设计是有缺陷的，有人会告诉我，但是我没有设计这个网站。任何关于最佳实践的想法将不胜感激。在一个真正干净的解决方案上会很棒。

我花了几天时间试图让 enquire.js 为我工作；也许我试图让 enquire.js 做的事情是不可能的。

我正在尝试根据媒体查询宽度加载 3 个外部 js 源文件。我已经上传了 enquire.js v2.1.2，并将其添加到头部并验证它正在加载。我想要的是这样的：

是否可以使用 enquire.js 来实现这一点？除了调用 enquire.js 之外，我还应该声明吗？

我在我的博客索引页面上以砌体布局显示 wordpress 帖子。我还在页脚上激活了砌体，以在砌体布局中显示 wordpress 页脚小部件。

所以基本上我在同一页上有 2 个砖石容器。
1. 一个用于显示博客文章，
2. 另一个用于显示页脚小部件。

页面的 html 标记如下所示：

HTML

以下是我尝试实现此布局的 url。-- http://lanarratrice-al-rawiya.com/lanarratrice/blog/

我不希望砖石加载到移动设备上。
1. 我希望 Posts 上的砌体只有在文档的最小宽度为 837px 时才能工作。
2. 另外，我希望页脚上的砌体仅在文档的最小宽度为 880 像素时才起作用。

任何低于上述宽度的媒体查询都不会触发砌体布局，我将以全宽显示我的所有帖子和小部件（占用可用的全部空间）。为了实现这一点，我使用了查询 js，如果它与媒体查询匹配，它将触发砌体布局。以下是我的javascript：

JAVASCRIPT

最后，这是我在此页面上应用的 css：

CSS

看来我的 javascript 工作正常，因为砌体布局已实现。但是当我将我的 Firefox 浏览器窗口调整到大约 846 像素（大约这个大小）时，我看到了一个损坏的布局。我有时会看到帖子在页脚的顶部。请参阅以下图片。

要重现此错误，您可能需要将浏览器窗口 (firefox) 缩小和扩大大约 5-8 倍。有时，如果您非常快或非常慢地收缩它，您可能看不到损坏的布局。顺便说一句，我使用的是 Firefox 35.0.1。请让我知道我能做些什么来解决这个问题。谢谢。

如何将 Enquire.js 与 AngularJS 一起使用的最佳实践是什么？我用谷歌搜索，找不到任何关于它的好文档。

根据屏幕大小，我需要在 Headroom.js 中有不同的偏移量。

Enquire.js 应该可以解决问题，但我无法让它正常工作。它在每次页面加载时只加载一个偏移设置，即使它在加载时是正确的，但是当我调整屏幕大小时它不会切换到另一个设置。

I am using the enquire.js library to add JavaScript media queries into a site I am developing.

The issue happens when I initially load the website.

1. I resize into the 860px breakpoint, and toggle the nav. All works fine and as expected.
2. Then I resize past 860px.
3. And once again I resize back into the 860px enquire.js media query. The toggle nav outputs both console messages.

Any ideas?

当 Enquire.js 不匹配时，销毁场景的正确代码是什么？我一直在浏览 ScrollMagic.js 文档，但运气不佳：http ://scrollmagic.io/examples/expert/removing_and_destroying.html

在控制台中，在 Unmatch 我得到：

Uncaught TypeError: a.destroy is not a function

所以我对 JS/jQuery 相当陌生。最近发现了 enquire.js，因为我想加载不同的 JS 样式来影响我在不同屏幕宽度下的折叠标题。我有一个滚动事件监听器，监听是否滚动超过 250 执行，否则恢复正常。

JS在这里：

var header、banner、nav、headertxt、pagetop、yPos；

发生的事情虽然是一个明显的主要问题，但我得到了预期的效果。JS 仅在我滚动页面后才执行。所以如果我调整大小什么都不会发生。我希望即时更改样式然后听我是否滚动然后使用上面的代码。我相信有一种更有效的方法可以做到这一点。仅凭我的知识和经验，我尝试了这个....

如您所见，例如，当内部宽度小于 899 时，我尝试侦听调整大小并执行样式。调整大小功能似乎根本不起作用。当我调整窗口大小时，我的滚动功能仍然正常工作，没有任何反应。现在我希望在未来更改并添加到 style.height .top 等，因为这个项目仍处于相当早期的阶段。

我还想过只在我的 CSS 断点中编码样式，但滚动侦听器会覆盖 CSS？或者只是从我的滚动功能中取出 else，这样 CSS 将成为 else 部分而不是 JS？我真的只是在这里大声思考。

又还在学习。还要提一下，我在构建我的作品集并想展示 JS 技能时故意使用 JS，因为我的其他项目都没有太多可以展示的 JS。提前感谢您的任何指导。解决了

有问题的代码在这里：https ://jsfiddle.net/ozeasa8t/

目标是通过一个缓存元素数组来 each()，以便在 enquire.js 驱动的 js 中创建切换效果。

我得到了左右错误，并希望你的意见。谢谢！