jquery - 画面サイズがjQueryよりも小さい場合は、要素から属性を変更します

Question

スケルトンを使ってレスポンシブウェブサイトを作っています。

画面がピクセル数よりも小さいときにクラスを変更したかった-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