CSS- und JS-Medienabfragen browserübergreifend synchronisieren

Question

Bei der Arbeit mit Responsive-Designs verwende ich CSS3-Medienabfragen, auch bei älteren Browsern mit respond.js. Es gibt Gelegenheiten, in denen ich JavaScript/jQuery auch benutzen muss, um einige Elemente auf der Seite zu manipulieren. Bei Verwendung von $ (window) .width() weicht dieser Wert jedoch häufig von dem Wert ab, der in der CSS-Medienabfrage aufgrund des Browser-Chroms und/oder des Vorhandenseins einer vertikalen Bildlaufleiste verwendet wird, dh eine CSS-Medienabfrage wird ausgelöst anderer Haltepunkt als die JS-Medienabfrage.

Ich weiß, dass Modernizr dieses Problem durch die Verwendung von Modernizr.mq behebt, aber das funktioniert nur in Browsern, die CSS-Medienabfragen unterstützen, im Allgemeinen bedeutet es nicht in IE8 und darunter funktioniert. Und wenn Sie einen Polyfill verwenden, um diesen älteren Browsern Unterstützung für die Medienabfrage hinzuzufügen (z. B. respond.js), funktioniert die Funktion Modernizr.mq nicht mehr aufgrund eines Konflikts/Überschreibens zwischen den beiden.

Was ich stattdessen getan habe, ist ein verstecktes Eingabeelement auf der Seite verwendet und es eine CSS-Breite Stil innerhalb jeder der Medienabfragen gegeben. Ich habe dann eine Funktion, die automatisch auf der Seite läuft (und auf Resize), die die Breite Wert erhält und führt die folgenden Schritte aus:

 if (width == "320px") { 
      //Functions 
     } 

     //481px to 600px 
     else if (width == "481px") { 
      //Functions 
     } 

     //601px to 768px 
     else if (width == "601px") { 
      //Functions 
     } 

     //769px to 960px 
     else if (width == "769px") { 
      //Functions 
     } 

     //769 to 1024px 
     else if (width == "961px") { 
      //Functions 
     } 

     //1024px+ 
     else { 
      //Functions 
     } 

Diese im Grunde die JS zwingt vollständig abzuarbeiten der CSS-Medienabfrage, die die Synchronisierung zwei. Dies kann spezifischer und nicht generischer werden als ich es habe, stattdessen wird das Abfeuern basierend auf einem bestimmten Element und einem spezifischen Stil, der sich an diesem Element ändert, abhängig von den individuellen Projektanforderungen.

Meine Frage ist dann, gibt es eine einfachere Möglichkeit, dies zu tun? Ich habe viel Zeit damit verbracht, das zu untersuchen und damit zu experimentieren, und es scheint die bisher beste Option zu sein, die auch ältere Browser berücksichtigt.

Answer 1

PPK listete eine schöne Art, die CSS & JS auf seinem Blog, die Art sichert Ihre Methode zu paaren:

@media all and (max-width: 900px) { 
// styles 
} 

if (document.documentElement.clientWidth < 900) { 
    // scripts 
} 

Sein vollständiger Beitrag auf es here ist.

Es gibt auch das enquire.js Plug-in.