jQuery，响应式设计 : how to change a class based on window size

Question

我正在创建响应式 magento 主题，但遇到了问题。在正常窗口大小期间，我的菜单的位置与在 ipad/mobile 大小时不同。我想知道是否有一个 jQuery 命令允许您根据窗口大小删除类/div，我们将不胜感激。

下面是我试过但没有用的东西:

jQuery(window).resize(function() {
        var $j = jQuery;
        var windowwidth = $j(window).width();

        $j(windowwidth).onChange(function(){
            if (windowwidth < '148') {
                $j('.parent').css('display','relative');
            }
        });
    } 

无法让 jQuery 按照下面的建议工作，但 css3 方法完美运行。 @media 屏幕和(最大宽度:960 像素){}

Answer 1

您不能将事件监听器放在数字 (windowwidth) 上。您只需将该值与 resize 事件处理程序中的所需值进行比较。

每次窗口的宽度或高度发生变化时，resize 处理程序都会触发。

您的代码应如下所示:

$(window).resize(function() {
    if ($(window).width() < 148) {
        $('.parent').css('display','relative');
    }
} 

您还应该考虑使用 CSS Media Queries而不是 JS。