问题标签 [enquire.js]

首先，我想强调一下，我是 javascript 编程的新手，我正在尝试从这里尽可能多地学习。阅读查询 js api、文档以及源代码。我想知道查询 js 和常规使用 matchmedia 和 resize 事件侦听器有什么区别。

查询js链接：http ://wicky.nillia.ms/enquire.js/

将不胜感激任何贡献

我有一个 jQuery 函数，它使用一些变量作为“left-margin”值来在一些内联 div 上创建轮播类型效果（单击箭头将容器向左或向右移动）。简单的版本是这样的 - http://jsfiddle.net/nX47z/

我如何使用 enquire.js 来根据屏幕大小更改这些变量？我已经尝试将它们添加到设置和匹配部分，但它似乎不起作用 - http://jsfiddle.net/mue9h/2/

我需要在页面加载和调整大小时设置变量。

当然我错过了一些简单的东西！

我有这段代码在 IE8 上不起作用......谷歌搜索我找不到解决方案......

你知道我怎样才能让它在 IE8 上也能工作吗？

这是简单的代码（桌面、平板电脑和移动设备是带有媒体查询的字符串变量......）：

我正在尝试将 Modernizr 和 enquire.js 添加到我的网站，以实现更简洁的移动实现，该实现仅在桌面媒体查询实际应用时才加载桌面内容，而不仅仅是隐藏它。然而，我的尝试已经被 enquire.js 似乎根本不起作用的事实所阻止。

似乎我已经设法让 Modernizr 正常运行，因为我的 unrealsp.js 已加载（代码的下拉菜单相关部分工作正常），但无论我做什么，enquire.js 部分中的代码都不会执行. 任何帮助将不胜感激。

我的 HTML 代码：

我的“unrealsp.js”代码：

enquire.min.js 中错误的控制台输出（我使用的是最新的）：

我使用 enquire.js 是因为在本主题中建议使用它。

我不能使用媒体查询，因为：

• 媒体查询也将滚动条计入窗口大小，而 jQuery$(window).width()不计算
• 我需要将一个元素设置为窗口宽度，而 CSS 无法做到这一点

但是因为我对其他内容使用媒体查询并且滚动条宽度因平台而异，所以我需要找到一个 JS 库来允许我使用 JS 并模拟媒体查询。Enquire.js 很好地做到了这一点。不过，我对此有一个问题。

1. 测试用例 1（小提琴）

在这两种情况下，将窗口的宽度缩小到小于 480 像素。（在我的网站上，您需要刷新页面；广告仅在刷新后调整大小）。您可能会注意到我想要做的事情：当窗口小于 480 像素时，缩略图（图像）必须放在左侧（其值是其父级的填充值）并且它必须获得窗口的宽度。

到目前为止，这在 enquire.js 中效果很好。调整窗口大小时会出现问题。如果视口变小，图像的大小不会改变，这是应该的。match当然，这是非常合乎逻辑的：从to或其他方面没有变化unmatch，因此不会再次调用该函数。不幸的是，这正是我所需要的。我需要在每次调整大小时再次调用该函数。

我以为这个插件曾经有类似.listen()的东西，但它似乎不再起作用了。

有什么帮助吗？

我正在使用enquire.js将我的 RoyalSlider 的高度动态设置为它旁边元素的高度。这在 Firefox 中有效，但在 Safari 加载时，滑块的高度是可能的最小高度（因此是箭头的高度）。只有在我调整窗口大小后，才会调整正确的高度。

我试图在 CSS 中为初始加载设置一个静态高度，但样式不适应。

我正在试验条件样式表加载。

我有多个带有多个断点的元素。对于每个元素和每个断点，我都创建了一个单独的样式表。例如：

• navi-00em-30em.css: 一栏导航
• navi-30em-60em.css: 两栏导航

• navi-60em-inf.css: 内联导航

• gal-00em-40em.css: 一栏画廊

• gal-40em-70em.css: 两列画廊
• gal-70em-inf.css: 四列画廊

等等……</p>

我通过使用媒体查询将这些样式表添加到我的 head-section。我将它们定义为仅在特定的宽度范围内加载，例如两列导航的样式表具有以下媒体属性： screen and (min-width: 30em) and (max-width: 59.999999em).

这种技术当然会导致许多丑陋的 HTTP 请求，从而导致性能下降。所以我有了在页面加载时通过 javascript 检测屏幕大小然后加载自定义合并 CSS 文件的想法。在我们的例子中，会有 5 个不同的文件。例如，如果页面加载时屏幕大小为 50em，gal-40em-70em.css并且navi-30em-60em将被合并并附加到 head 部分。之后，未合并的样式表将被附加到具有明显媒体属性的头部部分。

我怎样才能做到这一点？

一种方法

因为无论如何我在网站上使用 enquire.js，我认为使用该脚本很聪明。一种可能的解决方案可能是（未经测试！）：

如您所见，这不是很苗条，我也不确定您是否可以像我在代码中那样嵌套查询处理程序。没有更简单的方法吗？

我正在重建我的个人网站，我有两个元素并排浮动，首先是 80%，其次是 20%。

http://codepen.io/anon/pen/xgask

SCSS

HTML

在完美的桌面尺寸上。如果第一个元素中的文本比第二个元素中的图片长，则文本不会在下面换行，这就是我想要的。

但是，在移动尺寸上，我希望文本元素是全宽的，并且图片向右浮动，以便文本环绕。

使用两个单独的元素，因为它们是不可能的，因此使用带有 enquire.js 之类的 javascript 来响应媒体查询是否合适，然后分离图片并将其放置在文本元素的开头并具有样式浮动它。

我知道如何编写所有代码，那里没有问题，只是问是否适合使用一点点 javascript 来帮助我获得我想要的响应式布局？

我正在尝试使用 enquire.js 在屏幕尺寸较小时触发我的 bxslider 重新加载，以显示更少的图像。

我已经注册了一个屏幕宽度，如下所示。

现在作为过渡的一部分，我需要根据与当前类的原型关联的变量进行计算。

在我引用的所有其他函数中this，我可以访问变量，例如 enguire js 实例中的 ourCarouselCollection，我得到了作为 register 调用结果的对象。

为什么会发生这种情况，是否有可能改变它？

我正在循环一个包含多个元素的对象，每个元素都包含多个媒体查询。

在循环中，我动态调用 enquire.js.register()以在比赛中执行某些操作。这最初是有效的，但在循环之外，并且在调整浏览器大小时，匹配不再有效，因为循环中使用的变量已从循环递增到它们的最高值。

用代码解释起来可能更容易！

这是images对象：

这是循环：

images[x]未定义，因为x = 3. 我如何保持x和y等于未来matches 最初传递的内容？