在javascript中包含媒体查询

Question

我有以下jQuery代码：

jQuery('.slider-home').slick({
 slidesToShow: 4,
 slidesToScroll: 1,
 asNavFor: '.slider-for, .slider-arrow',
 focusOnSelect: true,
 autoplay: false,
 arrows: true
});

我正在尝试添加媒体查询，以便将slidesToShow从移动设备上的1更改为台式机上的4。

我尝试了以下代码：

if (matchMedia('only screen and (max-width: 1024px)').matches) {
jQuery('.slider-home').slick({
slidesToShow: 1
});
} else {
jQuery('.slider-home').slick({
slidesToShow: 4
});

但这似乎不起作用，是否有人对我要去哪里出错有任何想法？

Answer 1

如果您确实想在JavaScript代码中实现它，则可以检查$(window).width() 。 代码可以如下：

var windowWidth = $(window).width();
if(windowWidth < 1024)
{
    jQuery('.slider-home').slick({
        slidesToShow: 1
    });
}
else {
    jQuery('.slider-home').slick({
       slidesToShow: 4
    });
}

但是同时您也将考虑屏幕旋转事件。 因为在某些设备中， portrait屏幕尺寸可能小于1024 ， landscape屏幕可能会大于此限制。