JavaScript'te medya sorguları nasıl kullanılır?

Feb 11 2023

Javascript'te yeniden boyutlandırmaları izlemek (bazı işlevleri yerine getirmek için) oldukça yaygın olabilir. En azından çoğu durumda, bu sorun için en iyi çözüm olmayan "yeniden boyutlandırma" üzerine bir olay dinleyicisi ekleyerek bu durumu ele almak yaygındır.

Bu makalede, JavaScript'te bu durumlarla başa çıkmanın etkili bir yolunu göstereceğim. Aynı şeyi yapan iki yaklaşımı karşılaştıracağım: matchMedia yöntemi ve "resize" olay dinleyicisi.

Her yöntemin eksilerini ve artılarını göstereceğim, nasıl kullanılacağını göstereceğim ve yol boyunca örnekler vereceğim.

" WindowArayüzün yöntemi, daha sonra medya sorgusu dizesiyle eşleşip eşleşmediğini belirlemek ve aynı zamanda bu medya sorgusuyla eşleştiğinde (veya eşleşmeyi durdurduğunda) algılamak üzere belgeyi izlemek için kullanılabilecek matchMedia()yeni bir nesne döndürür ."MediaQueryListdocument

İlk olarak, matchMedia yönteminin, herhangi bir duyarlı tasarımın temel bileşeni olan CSS medya sorgularına benzer olduğunu anlamamız gerekir.

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

matchMedia() yöntemi, sorgunun sonuçlarını içeren bir MediaQueryList döndürür.

mediaQueryList, 3 özelliğe sahip bir nesnedir:

Eşleşir: (doğru/yanlış) ekranın medya sorgusu için koşulları karşılayıp karşılamadığı
medya: (dize) medya sorgusunun kendisi, temel olarak eklediğiniz dize
onchange: (işlev) ortam durumu değiştiğinde çağrılan bir geri arama işlevini kabul eden dinleyici yöntemi.

Kullanım, CSS medya sorgularıyla neredeyse aynıdır. Medya sorgu dizesini matchMedia()'ya iletiyoruz ve ardından “matches” özelliğini kontrol ediyoruz.

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";
  }
}

Pek çok geliştiricinin JavaScript'te ekran yeniden boyutlandırmasını işlemesinin tipik ve en yaygın yolu, belge genişliğini kontrol eden bir yeniden boyutlandırma olay dinleyicisini bağlamaktır.

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

Farkı console.log'da da görebilirsiniz, resize olayı, tarayıcı her yeniden boyutlandırıldığında etkinleşirken, matchMedia medya sorgusuyla eşleştikten sonra yalnızca bir kez çalışır.

"Performans sorunlarının ötesine geçsek bile, yeniden boyutlandırma baskı ve yönlendirme gibi şeyler için gelişmiş medya sorguları yazmamıza izin vermediği için kısıtlayıcıdır. Bu nedenle, görüntü alanı genişliklerini eşleştirmemize izin vererek "medya sorgusu" davranışını taklit etse de, diğer pek çok şeyi eşleştirmekten acizdir ve gerçek medya sorgularının çok daha fazlasını yapabileceğini biliyoruz."

Sonuç olarak, matchMedia'nın ihtiyaçlarından bahsettik ve medya koşullarını tanımlamamıza nasıl izin verdiğini ve kodumuzu koşulla eşleştiğinde bir kez ve "onchange" yöntemini ayarlayarak kalıcı bir şekilde çalıştırmamızı sağlayan mediaQueryList nesnesini inceledik. mediaQueryList'in.

MatchMedia yöntemini, ekran boyutundaki değişikliklere yanıt vermemiz için en uygun yolu incelememizi sağlayan bir yeniden boyutlandırma olay dinleyicisini bağlamaya benzettik.

Her yaklaşımda nasıl yazılacağını göstermek için hepsinin aynı şeyi yaptığı (body'nin backgroundColor'unu mercan olarak ayarlayarak) yol boyunca örnekler verdim.

Bu gönderiyle ilgili herhangi bir sorunuz veya herhangi bir öneriniz, düzeltmeniz veya notunuz varsa, yorum yapmaktan, e-posta göndermekten veya bana DM göndermekten çekinmeyin. Okuduğunuz için teşekkürler!