Ersetzen von Stylesheets mit jQuery abhängig von der Bildschirmgröße

Question

Hallo Ich frage mich, ob jemand helfen kann, ich versuche, eine reaktionsschnelle Website mit jQuery zu erstellen (zu tun, wie die Zielgruppe auf IE7/8 und css3-mediaqueries ist) .js scheint die jQuery UI zu stören, die ich auch verwende). Ich benutze das folgende Skript, um Breite und Höhe zu erkennen und Stile entsprechend anzuwenden, es funktioniert gut für die Breite, aber nicht die Höhe, es lädt die SMstyle.css und überschreibt dann mit der style.css. Ich versuche JavaScript zu lernen, aber nicht super stark im Moment, ich weiß, dass es einen einfacheren Weg gibt! Jede mögliche Hilfe würde geschätzt ...

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 1

Wenn mit ansprechenden Layouts zu tun, die Sie nicht wirklich kümmern uns um die Höhe. Das ganze Konzept ist, dass, wenn der Inhalt nicht mit der Breite passen kann, er kollabiert (und somit die Höhe erhöht).

EDIT:

Ich glaube, Sie brauchen, da der Umfang von $ $ (document) statt $ (this), verwenden (diese) wird anders sein, wenn Sie es manuell auslösen und, wenn es ausgelöst durch ein Größenänderungsereignis

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(); 
}); 

Um die verschiedenen Bereiche zu sehen, versuchen Sie dies:

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

Answer 2

Überarbeitete (ungetestet)

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()); 
    }); 
});