使用css媒体查询触发jquery

Question

我在我的项目中使用css媒体查询来创建一个可以在任何大小的屏幕上工作的网站.我正在寻找触发差异jquery函数就像我对css一样.

例如,如果浏览器大小介于1000px和1300px之间,我想调用以下函数:

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

但是当浏览器大小低于1000px时,js将停止其处理.等等等等.

我不确定这是否可行,但也许现有的解决方案或插件可根据浏览器窗口大小创建不同的js环境.我想我可以用某种格式创建条件语句.有什么想法吗？

Answer 1

该Modernizr的库支持使该评估媒体查询直接调用JavaScript.

如果您不想这样做,您可以让不同的CSS规则驱动隐藏元素的某些属性,然后您可以使用".css()"来检查jQuery中的值.换句话说,"大于1000px宽"的规则可以将隐藏设置<div>为"宽度:1000px",然后您可以检查

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

这是一个愚蠢的jsfiddle演示.向左和向右拖动中间分隔条以查看JavaScript代码(在间隔计时器中)检测到隐藏元素的有效"宽度"的更改.

例如,如果您参考响应式设计,那么您也可以触发现有元素的属性,而无需向HTML添加标记

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

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检测 - 不仅在文档最初加载时!