當屏幕尺寸較小，然後用jQuery更改元素屬性

Question

我正在使用Skeleton製作響應式網站。

我想換一個類時，屏幕越小則像素的數量 - 與jQuery
像這樣：（當然這不能工作）

@media only screen and (min-width: 768px) and (max-width: 959px) { 
/* jQuery code */ 
} 

Answer 1

這是noConflict模式。
要包含WordPress使用的jQuery和其他.js文件this

jQuery(document).on('ready', function() { 
     jQuery(window).on('resize', function() { 
      /* Tablet Portrait size to standard 960 (devices and browsers) */ 
      if (jQuery(document).width() < 959 && jQuery(document).width() > 768) { 
       //change the attributes from the div #home_content (first parameter: the attribute, what it needs to be) 
       jQuery('#home_content').attr('class','sixteen columns'); 
       jQuery('#slider').attr('class','sixteen columns'); 

      } 
      else{ 
       //change it back to normal (how the class was) 
       jQuery('#home_content').attr('class','nine columns'); 
       jQuery('#slider').attr('class','nine columns'); 
      } 

      /* Mobile Landscape Size to Tablet Portrait (devices and browsers) */ 
      if(jQuery(document).width() < 767 && jQuery(document).width() > 480) { 
       //code 
      } 
      else{ 

      } 

      /* Mobile Landscape Size to Tablet Portrait (devices and browsers) */ 
      if(jQuery(document).width() < 479) { 
       //code 
      } 
      else{ 

      } 
     }).trigger('resize'); // Trigger resize handlers.  
    });//ready