在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屏幕可能會大於此限制。