Window matchMedia() yöntemi

Tanım ve kullanım

matchMedia() Metod, sorgu sonuçlarıyla birlikte MediaQueryList döndürür.

Ayrıca bakınız:

MediaQueryList nesnesi

Medya sorgusu

matchMedia() yönteminin medya sorgusu, min-height, min-width, orientation gibi CSS @media kurallarının herhangi bir medya özelliği olabilir.

Örnek

matchMedia("(max-height: 480px)").matches);
matchMedia("(max-width: 640px)").matches);

Örnek

Örnek 1

Ekran/ekran genişliği 700 pikselden büyük mü?:

if (window.matchMedia("(max-width: 700px)").matches) {
  // Ekran genişliği 700 pikselden küçük veya eşit
} else {
  // Ekran genişliği 700 pikselden büyük
}

şahsen deneyin

Örnek açıklaması

Bu örnek medya sorgusunu çalıştırır ve mevcut pencere durumunu ileştirir.

Windows durumu değiştiğinde yanıtlayıcı medya sorgusunu çalıştırmak için MediaQueryList nesnesine olay dinleyici ekleyin (daha fazla örnek için aşağıya bakın):

Örnek 2

Ekran genişliği 500 pikselden küçük veya eşitse arka plan rengini sarıya, aksi takdirde pembeye ayarlayın:

// Uygunluk fonksiyonu oluşturun
function myFunction(x) {
  if (x.matches) {
    document.body.style.backgroundColor = "yellow";
  } else {
    document.body.style.backgroundColor = "pink";
  }
}
// // MediaQueryList nesnesi oluşturun
const mmObj = window.matchMedia("(max-width: 700px)");
// Çalışma zamanında match fonksiyonunu çağırın:
myFunction(mmObj);
// match fonksiyonunu durum değişikliklerini dinleyici olarak ekleyin:
mmObj.addListener(myFunction);

şahsen deneyin

grama

window.matchMedia("mediaQuery)

parametre

parametre Açıklama
mediaQuery Gerekli. Medya sorgusunu ifade eden bir dizi.}

Dönüş değer

Tür Açıklama
Nesne Media Query sonuçlarıyla birlikte gelen MediaQueryList nesnesi.

Tarayıcı desteği

Tüm tarayıcılar destekler matchMedia()

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Destek 11 Destek Destek Destek Destek