媒体查询和Javascript

我想在屏幕分辨率降低时更改脚本。 我读到一些关于使用“screen.width”的信息，但它不起作用

这是我的脚本代码

    $(function() {    
         $("div.holder").jPages({
             containerID: "itemContainer",
             keyBrowse   : true,
             perPage : 5     
         }); 
    });

例如，当屏幕分辨率小于600像素时，我只希望显示两篇文章

---

谢谢

可以使用window.innerWidth获取窗口的大小。您的示例经过修改以支持以下内容：

$(function() {    
     $("div.holder").jPages({
         containerID: "itemContainer",
         keyBrowse   : true,
         perPage : (window.innerWidth < 600 ? 2 : 5)     
     }); 
});

$（函数（）{
美元（“部门持有人”）.jPages({
containerID:“itemContainer”，
是的，
每页：（窗内宽度<600？2:5）
}); 
});

您可以将处理程序附加到

调整大小

事件。因为您似乎正在使用jQuery：

$(function() {    
    $("div.holder").jPages({
        containerID: "itemContainer",
        keyBrowse   : true,
        perPage : 5     
    }); 

    $(window).resize(function() {
        if(window.innerWidth < 600){
            // change perPage to 2 here
        }
    });
});

$（函数（）{
美元（“部门持有人”）.jPages({
containerID:“itemContainer”，
是的，
每页：5
}); 
$（窗口）。调整大小（函数（）{
如果（窗内宽度<600）{
//在这里将每页更改为2
}
});
});

---

jQuery的.resize（）方法的文档-

您可以使用resize事件处理程序，如braican所述。不过，我建议将其与

---

另一个选项是使用（这只是matchMedia的包装器）

看看这本书。如果你想让帖子的数量动态变化的话，你可能还需要一个网站。干得好，Joshua！但我的意图是，它将自动更改，而无需刷新页面。你知道怎么做吗？正如braican所说，你可以监听窗口对象上的调整大小事件。