Ekran sayfalarına bağlı olarak jQuery ile stil sayfalarını değiştirme

Question

Merhaba Herkes yardımcı olabilir, jQuery kullanarak yanıt veren bir site oluşturmaya çalışıyorum (hedef kitle IE7/8 ve css3-mediaqueries'de olduğu gibi yapmalıyım) .js ayrıca kullanıyorum jQuery UI ile karışıyor gibi görünüyor). Genişlik ve yükseklik algılamak ve stilleri buna göre uygulamak için aşağıdaki komut dosyasını kullanıyorum, genişlik için değil, yükseklik için harika çalışıyor, SMstyle.css yükler ve style.css ile üzerine yazar. JavaScript'i öğrenmeye çalışıyorum ama şu anda süper güçlü değil, daha kolay bir yol olduğunu biliyorum! Herhangi bir yardım ...

function adjustStyle(width, height) { 
    width = parseInt(width); 
    height = parseInt(height); 
     if (((width >= 701) && (width < 1200)) || (height < 800)) 
      $("#size-stylesheet").attr("href", "css/SMstyle.css"); 
     else 
      $("#size-stylesheet").attr("href", "css/style.css"); 
} 

$(function() { 
    adjustStyle($(this).width(), $(this).height()); 
    $(window).resize(function() { 
     adjustStyle($(this).width(), $(this).height()); 
    }); 
}); 

Answer 1

Duyarlı düzen uğraşan, gerçekten yüksekliği umurumda değil (denenmemiş)

function adjustStyle(width) { 
     width = parseInt(width); 
     if ((width >= 701) && (width < 1200 
     )) { 
      $("#size-stylesheet").attr("href", "css/SMstyle.css"); 
     } else { 
      $("#size-stylesheet").attr("href", "css/style.css"); 
     } 
    } 

    $(function() { 
     adjustStyle($(this).width()); 
     $(window).resize(function() { 
      adjustStyle($(this).width()); 
     }); 
    }); 

    function adjustStyle(height) { 
     height = parseInt(height); 
     if (height < 800 
     ) { 
      $("#size-stylesheet").attr("href", "css/SMstyle.css"); 
     } else { 
      $("#size-stylesheet").attr("href", "css/style.css"); 
     } 
    } 

    $(function() { 
     adjustStyle($(this).height()); 
     $(window).resize(function() { 
      adjustStyle($(this).height()); 
     }); 

    }); 

Answer 2

Refactored mutluluk duyacağız. Bütün konsept, içeriğin genişliğe uymaması halinde, çöker (ve böylece yüksekliği arttırır).

DÜZENLEME: Ben $ kapsamı beri yerine $ (this) $ (belge) kullanmak gerekir inanıyoruz

manuel olarak tetiklemek ve ne zaman ile tetiklendiğinde (bu) farklı olacaktır bir yeniden boyutlandırma olayı.

function adjustStyle() { 
    var width = $(document).width(); 
    var height = $(document).height(); 
    if (((width >= 701) && (width < 1200)) || (height < 800)) { 
     $("#size-stylesheet").attr("href", "css/SMstyle.css"); 
    } else { 
     $("#size-stylesheet").attr("href", "css/style.css"); 
    } 
} 

adjustStyle(); 
$(window).resize(function() { 
    adjustStyle(); 
}); 

farklı kapsamları görmek için bu deneyin:

$(function() { 
    console.log('Scope', $(this)); // Scope is DOM-element 
    $(window).resize(function() { 
     console.log('Scope', $(this)); // Scope is Window object. 
    }); 
});