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

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

1 个答案: