Jak używać zapytań o media w JavaScript?

Feb 11 2023

Często można obserwować zmiany rozmiaru w javascript (aby osiągnąć pewną funkcjonalność). Powszechne jest radzenie sobie z tą sytuacją przez dodanie detektora zdarzeń do „zmiany rozmiaru”, co nie jest najlepszym rozwiązaniem tego problemu, przynajmniej w większości przypadków.

W tym artykule pokażę skuteczny sposób radzenia sobie z takimi sytuacjami w JavaScript. Porównam dwa podejścia, które osiągają to samo: metodę matchMedia i detektor zdarzeń „resize”.

Pokażę wady i zalety każdej metody, pokażę, jak z niej korzystać i podam przykłady po drodze.

„ Metoda Windowinterfejsu matchMedia()zwraca nowy MediaQueryListobiekt, którego można następnie użyć do określenia, czy pasuje do documentciągu zapytania o media, a także do monitorowania dokumentu w celu wykrycia, kiedy pasuje (lub przestaje pasować) do tego zapytania o media”.

Po pierwsze, musimy zrozumieć, że metoda matchMedia jest podobna do zapytań o media CSS, które są podstawowym składnikiem każdego responsywnego projektu.

@media (min-width: 768px) {
  body {
    background-color: coral;
  }
}

Metoda matchMedia() zwraca MediaQueryList z wynikami zapytania.

mediaQueryList to obiekt o 3 właściwościach:

dopasowania: (prawda/fałsz), czy ekran spełnia warunki zapytania o media
media: (string) samo zapytanie o media, w zasadzie wstawiony ciąg
onchange: (funkcja) metoda słuchacza, która akceptuje funkcję wywołania zwrotnego, która jest wywoływana, gdy zmienia się status nośnika.

Użycie jest prawie identyczne jak w przypadku zapytań o media CSS. Przekazujemy ciąg zapytania o media do matchMedia(), a następnie sprawdzamy właściwość „matches”.

window.matchMedia("min-width: 768px").onchange = (e) => {
  if (e.matches) {
    // the screen was below 768 and now it's above or equal
    document.body.style.backgroundColor = "coral";
  }
}

Typowym i najczęstszym sposobem, w jaki wielu programistów radzi sobie ze zmianą rozmiaru ekranu w JavaScript, jest powiązanie detektora zdarzeń resize, który sprawdza szerokość dokumentu.

window.addEventListener("resize", function() {
  if (document.body.clientWidth >= 768) {
    document.body.style.backgroundColor = "coral";
  }
});

Możesz również zobaczyć różnicę w console.log, zdarzenie resize będzie uruchamiane za każdym razem, gdy rozmiar przeglądarki zostanie zmieniony, podczas gdy matchMedia zostanie uruchomione tylko raz po dopasowaniu zapytania o media.

„Nawet jeśli pominiemy problemy z wydajnością, zmiana rozmiaru jest restrykcyjna w tym sensie, że nie pozwala nam pisać zaawansowanych zapytań o media, takich jak druk i orientacja. Tak więc, chociaż naśladuje zachowanie „zapytania o media”, umożliwiając nam dopasowanie szerokości widocznego obszaru, nie jest w stanie dopasować większości czegokolwiek innego — a wiemy, że prawdziwe zapytania o media są w stanie o wiele więcej”.

Podsumowując, rozmawialiśmy o potrzebach matchMedia i zbadaliśmy, w jaki sposób pozwala nam definiować warunki mediów i zbadać obiekt mediaQueryList, który pozwala nam uruchomić nasz kod raz, gdy spełnia warunek i w sposób trwały, ustawiając metodę „onchange” z mediaQueryList.

Porównaliśmy metodę matchMedia do wiązania detektora zdarzeń resize, co pozwoliło nam zbadać najbardziej odpowiedni dla nas sposób reagowania na zmiany rozmiaru ekranu.

Dałem przykłady po drodze, że wszyscy robią to samo (ustawiając backgroundColor ciała na coral), aby wyświetlić, jak to napisać na każdym podejściu.

Jeśli masz jakieś pytania dotyczące tego posta lub jakieś sugestie, poprawki lub uwagi, możesz je skomentować, wysłać e-mailem lub wysłać do mnie wiadomość prywatną. Dziękuję za przeczytanie!