Change attribute from an element when the screen size is smaller then with jQuery

Question

I'm making a responsive website with the use of Skeleton.

I wanted to change a class when the screen is smaller then a amount of pixels - with jQuery
Like this: (of course this can't work)

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

Answer 1

This is in noConflict mode.
To include jQuery and other .js files for WordPress use 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