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

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'); 
      } 
     }); 
    } 

无法得到的建议下面的CSS3方法jQuery的工作完美。 @media screen and（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

我建议看这个类型的工作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 3

你可以做到这一点dcro说，与调整大小事件处理程序和WINDOWWIDTH，或者你也可以通过创建类似这样的

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

源的条件下做到这一点与@media CSS标签：http://line25.com/tutorials/create-a-responsive-web-design-with-media-queries

的@media标签可能无法虽然

Answer 4

老的浏览器上工作，这工作虽然：

$(window).resize(function() { 

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

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

});