11

我在我的项目中使用 css 媒体查询来创建一个适用于任何大小屏幕的网站。我希望像使用 css 一样触发不同的 jquery 函数。

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

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

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

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

4

3 回答 3

17

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

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

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

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

如果您引用响应式设计，那么您也可以触发现有元素的属性，而无需向您的 html 添加标记，例如

if ( $("#navigation li").css("float") === "none") {
于 2011-06-23T22:54:19.270 回答
14

正如 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 检测也会运行 - 不仅在最初加载文档时！

于 2013-03-22T12:13:22.630 回答
0

我对一些必须在移动设备上创建但在桌面上销毁的轮播也有类似的问题......而且我不喜欢以像素为单位检查窗口宽度的解决方案，所以我创建了一个小函数来“收听”媒体查询状态变化，无需 Modernizr。

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

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

于 2015-02-26T08:06:36.817 回答