当屏幕尺寸较小时，从元素更改属性，然后使用 jQuery

Question

我正在使用Skeleton.
制作一个响应式网站

我想在屏幕小于像素量时更改一个类 - 使用 jQuery
像这样：（当然这行不通）

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

Answer 1

这是

在noConflict模式下.
要包含 jQuery 和其他 WordPress .js文件，请使用此

    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