jquery - 当屏幕尺寸小于 jQuery 时，从元素更改属性

Question

我正在使用Skeleton创建一个响应式网站。

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

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

Answer 1

这是在 noConflict 模式下。
要为 WordPress 包含 jQuery 和其他 .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