问题标签 [enquire.js]

我在当前项目中使用enquire.js。我正在使用它将 css 类添加到大屏幕的几个元素中，并在较小的屏幕上删除这些类：

这必须有一个速记。我原以为我可以创建一个类似的函数：

这在unmatch查询功能中是可逆的。这可能吗...？

我正在使用 enquire.js 插件来解析存储为数据属性的媒体查询，这些数据属性根据浏览器宽度移动 DOM 中的元素位置。

所以我写了以下内容，当您手动指定不匹配时效果很好，问题来自auto。我希望它记住原始位置并在元素超出媒体查询时自动将其移回。

但是我遇到了最初引用的上一个/下一个元素也已移动的问题。还有另一种方法可以将元素移回其原始位置吗？还是我最好只是隐藏元素而不是移动它？

Jsbin - http://jsbin.com/akAV/1/edit

不是代码问题，我只是不知道在这种特定情况下事情是如何工作的。

我正在使用 Wordpress 主题，该主题应该通过 javascript 动态加载部分 php 代码。它实际上与 UA 嗅探结合使用，因为如果设备是移动设备，则无论如何都应该使用移动模板，但这不是重点。

• 如果 screen.width < 1080px 我的 Wordpress 主题的移动版本菜单应该被加载。
• 否则，如果 screen.width 较大，则应加载桌面菜单版本
• 仅基于 CSS 媒体查询的解决方案是不可接受的，因为桌面版本太重了。

所以我决定通过enquire.js有条件地动态加载内容 我的 WP-homepage-template.php 的第一部分是：

因此，当屏幕尺寸达到 1080 像素时，Wordpress 应该加载仅包含 wp_nav_menu(MOBILE) 调用的 headernav-phone.php。如果屏幕尺寸更大，Wordpress 会加载 headernav-desktop.php，其中包括 wp_nav_menu(DESKTOP)。

这不起作用：

致命错误：在第 14 行调用 /XX/YYY/ZZZ/webseiten/XXX.YY/wp-content/themes/MyTheme/templates/headernav-phone.php 中未定义的函数 wp_nav_menu()

看起来我的代码是在 CMS 之前运行的，它破坏了自己的功能。

我的 wordpress 主题是响应式的，并且完全加载了 ajax：

• 当 window.width < 1080px 时加载 mobile-page.php
• 当 window.width > 1080px 时的 desktop-page.php。

目前它的工作原理是这样的：

• wp-templatepage-homepage.php 调用 homepage-js() 这是一个通过 wp_enqueue_script 包含的 js 文件
• homepage-js() 测试 window.width 并执行 ajax 调用，动态加载正确的 php 模板文件（移动/桌面）。

到目前为止效果很好，但是移动版本没有正确显示，因为我不知道如何将 mobile.css 放入网站的 head 部分。

我似乎无法为我使用 detach() 分离的元素添加附加功能

基本上我想要做的是根据屏幕尺寸（大于 900 像素）从 DOM 中删除一些图像并将它们添加回来（小于 900 像素）。我正在使用enquire.js来处理断点，但我无法正确实现已删除元素的插入。

这是html：

这是我正在使用的js：

分离似乎正在工作，但是当满足第二个条件时，什么也没有发生。难道我做错了什么？

代表我编辑愚蠢的错误我只是在查询匹配函数中声明变量“幻灯片”，因此它不适用于 unmatch 函数。

这现在有效：

我似乎也可以使用 remove() 而不是 detach()

我在我的布局中使用了一个小部件，我现在拥有它，所以当某个断点被击中时，它不会显示那个较大的小部件，然后转到较小的小部件。较大的小部件会隐藏，而较小的小部件会显示，但与两者关联的文本不正确。

大部件的文本显示，而小部件的较小文本不显示。我很确定这与每个人使用的脚本有关。display none 确实隐藏了元素，但脚本似乎仍在运行。

我对 JavaScript 完全一无所知，如果可能的话，我更喜欢 HTML 或 CSS 答案。如果没有，那么我将使用 JS，但需要一些指导。我读过很多文章，甚至在学习 JS 的过程中，但仍然不确定我读过的一些内容如何适用。

这就是我发现的似乎是我需要的，但我不确定如何调用我需要的脚本的语法。我是否只是将脚本本身放在那里而没有任何其他信息？我也读过关于使用 jquery 来做这样的事情

而且我什至读过有关使用 Modernizer 来执行此操作的信息，但我仍然必须阅读文档。

在 bin 中，它根本不显示任何文本，但较大的文本在那里并且在小部件的一侧。我只需要关闭那个大脚本并在某个媒体查询时打开另一个。

任何帮助是极大的赞赏。

HTML

CSS

最好的方法是什么，为什么？从移动性能的角度来看，jQuery 是不是最好的方式？

更新：将使用enquire.js，因为它是简单的方法（尽管我对它的使用仍然有点粗略）而且它有多小。

这是基本代码：

仍然没有完成并寻求更多支持。现在我选择了这条路线，我看到已经有很多关于 enquire.js 的文章和问题。我会在阅读时更新我的​​情况。

更新：这是我所在的地方，但它还没有工作。我仍然在 HTML 中拥有与每个脚本关联的样式，并且没有相应地显示任何使用的样式。一旦我得到正确的 enquire.js，会做这项工作吗？

这是新的jsbin

再次感谢一切！！

我正在尝试在我的 Wordpress 安装中使用 Enquire.js。我正在尝试将左列推到小屏幕的中央列下方。

我让它在我的笔记本电脑的大多数浏览器中工作，但它不能在旧的 Android 浏览器（2.2）上工作，说它需要一个 polyfill。我试图让这个 polyfill 工作，但仍然没有在 Android 上获得该功能，我仍然在 android 控制台中收到有关 matchmedia polyfill 的警告。

请帮我查明可能的问题。基本上，我在 function.php 中加载了几个脚本：

然后我的子模板有 js 文件夹，其中包含几个文件 polyfill.js，它应该填充媒体匹配（media.match.js 在同一个文件夹中）：

reorder.js（如下），它实际上也使用了同一文件夹中的 enquire.js：

使用媒体查询，我创建了一个可折叠的导航栏，而我的徽标位于底部。使用 enquire.js，我将最后一个 li 放在前面。如何仅在第一个匹配项上执行 prepend 以防止切换一个 li，每个匹配项向右？

这只发生在 iPad iOS7 上。在 iOS6 上完美运行

当我打开肖像页面时，topProducts.produtSliderEnable();功能topProducts.tabletThreeItems();已被调用。

但

当我打开横向页面时，我更改为纵向，没有调用任何内容。只有当我对属于下面显示的函数的元素执行单击事件时，才会调用两者

我不知道为什么会这样。非常感谢您的任何回复。

===========================================

如果您想进一步了解函数，请从我的 Literal Object 中截取

我正在制作一个响应式导航，它将导航的一部分移动到移动设备和桌面设备之间的不同位置。

为此，我使用 enquire.js 来注册我的断点并根据页面宽度移动内容。

我正在克隆元素并将其附加到页面的不同部分。

我遇到的问题是，当我在移动视图和桌面视图之间切换时，每次都会克隆元素 - 所以它们开始在桌面视图中堆积。

我不太熟悉 enquire.js 来制作它，以便该元素仅在它不存在时才克隆。