Synchronizacja zapytań o media CSS i JS w przeglądarkach

Question

Podczas pracy nad projektami responsywnymi korzystam z zapytań o media CSS3, w tym ze starszymi przeglądarkami używającymi pliku response.js. Są sytuacje, gdy potrzebuję również JavaScript/jQuery do manipulowania niektórymi elementami na stronie. Jednak przy użyciu $ (window) .width() ta wartość jest często inna niż wartość używana w zapytaniu o media CSS z powodu przeglądarki Chrome i/lub obecności pionowego paska przewijania, co oznacza, że ​​zapytanie o media CSS zostanie wywołane inny punkt przerwania niż zapytanie o media JS.

Wiem, że Modernizr rozwiązuje ten problem za pomocą narzędzia Modernizr.mq, ale działa tylko w przeglądarkach, które obsługują zapytania o media CSS na początek, co oznacza, że ​​nie będzie działać w IE8 i poniżej. Jeśli użyjesz funkcji polyfill do dodania obsługi zapytań o media do tych starszych przeglądarek (np. Answer.js), to program Modernizr.mq przestanie działać z powodu konfliktu/przesłaniania między tymi dwoma.

Zamiast tego wykorzystałem ukryty element wejściowy na stronie i nadałem mu styl szerokości CSS w każdym z zapytań o media. Mam następnie funkcję, która uruchamia się automatycznie na stronie (i zmiany rozmiaru), który otrzymuje tę wartość szerokości i wykonuje następujące czynności:

 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 
     } 

To w zasadzie wymusza JS pracować całkowicie wyłączyć zapytania mediów CSS, synchronizowania dwa. Może to być bardziej szczegółowe, a nie ogólne, jak to mam, zamiast wyzwalać w oparciu o konkretny element i konkretny styl, który zmienia się na tym elemencie, zależy to od indywidualnych potrzeb projektu.

Moje pytanie brzmi, czy istnieje prostszy sposób robienia tego? Spędziłem dużo czasu na analizowaniu i eksperymentowaniu z tym i wydaje się to najlepszą opcją do tej pory, która bierze pod uwagę również starsze przeglądarki.

Answer 1

PPK wymienione miły sposób, aby powiązać CSS & JS na swoim blogu, który rodzaj kopie zapasowe metody:

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

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

Jego pełny post Jest here. Jest to także wtyczka enquire.js.