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

Here是一个愚蠢的小人物。左右拖动中间分隔条以查看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检测 - 不仅仅是在最初加载文档时！

Answer 3

我遇到类似的问题，一些旋转木马必须在移动设备上创建，但在台式机中被破坏......我不喜欢以像素为单位检查窗口宽度的解决方案，所以我创建了一个小功能来“监听”当mediaquery状态发生变化时，不需要Modernizr。

您可以在每种状态下定义自己的代码（“在输入移动分辨率时”，“在离开桌面时”）......然后放置代码。

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

使用css媒体查询触发jquery

3 个答案: