用CSS媒体查询触发jquery

| 我在项目上使用CSS媒体查询来创建一个可与任何尺寸的屏幕一起使用的网站。我想要触发差异jquery函数，就像使用CSS一样。例如，如果浏览器的大小在1000像素到1300像素之间，我想调用以下函数：

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

但是，当浏览器大小小于1000px时，js将停止其处理。等等等等。我不确定是否可行，但是也许有一个现有的解决方案或插件可以根据浏览器窗口大小创建不同的js环境。我想我可以用某种格式创建条件语句。有什么想法吗？

已邀请:

3 个回复

羔磺

Modernizr库支持进行直接JavaScript调用以评估媒体查询。如果您不想这样做，则可以让不同的CSS规则驱动隐藏元素的某些属性，然后可以使用\“。css（）\”从jQuery检查值。换句话说，“大于1000像素宽”的规则可以将隐藏的<div>设置为“宽度：1000像素宽”，然后您可以检查

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

这是一个愚蠢的jsfiddle演示。左右拖动中间的分隔条，以查看JavaScript代码（在间隔计时器中）检测到对隐藏元素的有效“宽度”的更改。如果您引用的是响应式设计，那么还可以触发现有元素的属性，而无需在HTML中添加标记，例如

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

鲁釜头

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

浮凰量

我对某些必须在移动设备上创建的轮播有类似的问题，但是在台式机上却被销毁了……我不喜欢以像素为单位检查窗口宽度的解决方案，因此当无需使用Modernizr，即可更改mediaquery的状态。您可以在每种状态（\“进入移动分辨率\”，\“离开桌面\”）中定义自己的代码，然后在其中放置代码。希望可能对其他人有用；） https://github.com/carloscabo/MQBE （欢迎改进和想法；）

要回复问题请先登录或注册

用CSS媒体查询触发jquery

3 个回复

发起人

window

conditional_statements

media_queries

jquery

问题状态

用CSS媒体查询触发jquery

与内容相关的链接

3 个回复

发起人

window

conditional_statements

media_queries

jquery

问题状态