使用CSS媒体查询触发jQuery

Question

我在我的项目中使用CSS媒体查询来创建一个适用于任何尺寸屏幕的网站。我希望触发不同的jQuery函数，就像我使用CSS一样。

例如，如果浏览器大小在1000px和1300px之间，我想调用以下函数：

$('#mycarousel').jcarousel({
    vertical: true,
    scroll: 1,
    auto: 2,
    wrap: 'circular'
});

但是当浏览器大小小于1000px时，js会停止处理。等等。

我不确定是否可能，但也许存在一种现有的解决方案或插件，可以根据浏览器窗口大小创建不同的js环境。我想我可以以某种格式创建条件语句。你有什么想法？

- JCHASE11

Answer 1

Modernizr 库支持直接调用 JavaScript 来评估媒体查询。

如果您不想这样做，您可以使用不同的 CSS 规则来驱动某些隐藏元素的属性，并且您可以使用 jQuery 的 ".css()" 方法来检查该值。换句话说，“宽度大于1000像素”的规则可以将隐藏的 <div> 设置为“width: 1000px”，然后您可以进行检查。

if ( $("#widthIndicator").css("width") === "1000px") {
  // whatever

这里是一个简单的 jsfiddle 演示。拖动中间的分隔条向左或向右以查看 JavaScript 代码（在间隔计时器中）检测到隐藏元素有效“宽度”变化。

如果您参考响应式设计，则还可以触发现有元素的属性而无需添加标记到您的 HTML 中，例如：

if ( $("#navigation li").css("float") === "none") {

- Pointy

Answer 2

如Pointy所指出的那样，使用Modernizr非常容易。

添加以下JavaScript：

$(document).ready(function() {
    function doneResizing() {
        if(Modernizr.mq('screen and (min-width:768px)')) {
            // action for screen widths including and above 768 pixels 
        }
        else if(Modernizr.mq('screen and (max-width:767px)')) {
            // action for screen widths below 768 pixels 
        }
    }

    var id;
    $(window).resize(function() {
        clearTimeout(id);
        id = setTimeout(doneResizing, 0);
    });

    doneResizing();
});

这样，即使在调整浏览器窗口大小时，Modernizr Mediaquery检测也会运行 - 不仅仅是在文档最初加载时！

- Sebastian

---

不起作用，总是跳转到第一个，即使将屏幕大小减小到低于767像素。 - Kishankumar Vasoya

Answer 3

我曾经遇到过类似的问题，需要在移动设备上创建轮播图，但在桌面上则需要销毁... 我不喜欢检查窗口宽度像素的解决方案，因此我创建了一个小函数来“监听”媒体查询状态的变化，而无需使用Modernizr。

您可以在每个状态中定义自己的代码（“进入移动分辨率时”，“离开桌面时”）... 并在那里放置您的代码。

希望对其他人有用 ;)
https://github.com/carloscabo/MQBE
（改进和想法都受欢迎;)

- Carlos Cabo