Question

我正在制作响应式magento主题，但我遇到了问题。在正常窗口大小期间，我的菜单位置与ipad /手机大小时的位置不同。我想知道是否有一个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屏幕和（max-width：960px）{}

Answer 1

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

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

您的代码应如下所示：

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

您还应该考虑使用CSS Media Queries代替JS。

Answer 2

你可以像dcro所说的那样，使用resize事件处理程序和windowwidth，或者也可以通过创建像这样的条件在带有@media标记的CSS中执行它

@media screen and (max-width: 960px) {}

来源：http://line25.com/tutorials/create-a-responsive-web-design-with-media-queries

尽管

，@ media标签可能无法在旧版浏览器上运行

Answer 3

我建议为这类工作查看jRespond jquery库。

https://github.com/ten1seven/jRespond

例如：

var jRes = jRespond([
        {
            label: 'small',
            enter: 0,
            exit: 1000
        },{
            label: 'desktop',
            enter: 1001,
            exit: 10000
        }
    ]);


    jRes.addFunc({
        breakpoint: 'small',
        enter: function() {
           $('#sidebarbg,#sidebar,#content').removeClass('hided');
        },
        exit: function() {
           $('.collapseBtn.top.hide').removeClass('top hide');
        }
    });

它对定义的窗口大小的绑定事件以触发写入的函数。

Answer 4

这会有效：

$(window).resize(function() {

    var windowwidth = $(window).width();

    if (windowwidth < '148') {
       $('.parent').css('display','relative');
       alert('see it works');
    }

});

jQuery，响应式设计：如何根据窗口大小更改类

4 个答案: