Pencere eşleşmesiMedya()
örnek 1
Ekran/görünüm alanı 700 pikselden geniş mi:
if (window.matchMedia("(max-width: 700px)").matches) {
// Viewport is less or equal to 700 pixels wide
} else {
// Viewport is greater than 700 pixels wide
}
Tanım ve Kullanım
Yöntem , sorgudan elde edilen sonuçları içeren bir MediaQueryListmatchMedia() döndürür .
Ayrıca bakınız:
Medya sorguları
Yöntemin medya sorguları, min-height, min-width, oryantasyon vb. gibi CSS @media kuralınınmatchMedia() medya özelliklerinden herhangi biri olabilir
.
Örnekler
matchMedia("(max-height: 480px)").matches);
matchMedia("(max-width: 640px)").matches);
Sözdizimi
window.matchMedia(mediaQuery)
parametreler
| Parameter | Description |
| mediaQuery | Required. A string representing a media query. |
Geri dönüş değeri
| Tip | Açıklama |
| Bir obje | Medya sorgusunun sonuçlarını içeren bir MediaQueryList nesnesi. |
Örnekler Açıklandı
Bu sayfadaki ilk örnek, bir medya sorgusu çalıştırır ve bunu mevcut pencere durumuyla karşılaştırır.
Pencere durumu değiştiğinde duyarlı medya sorgusu çalıştırmak için MediaQueryList nesnesine bir olay dinleyicisi ekleyin (Aşağıdaki "Daha Fazla Örnek"e bakın):
Daha fazla örnek
Görünüm alanı 500 piksel genişliğinde veya daha azsa, arka plan rengini sarıya, aksi takdirde pembeye ayarlayın:
// Create a match function
function myFunction(x) {
if (x.matches) {
document.body.style.backgroundColor = "yellow";
} else {
document.body.style.backgroundColor = "pink";
}
}
// // Create a MediaQueryList object
const mmObj = window.matchMedia("(max-width: 700px)")
// Call the match function at run time:
myFunction(mmObj);
// Add the match function as a listener for state changes:
mmObj.addListener(myFunction);
Tarayıcı Desteği
matchMedia() tüm modern tarayıcılarda desteklenir:
| Chrome | IE | Edge | Firefox | Safari | Opera |
| Yes | 11 | Yes | Yes | Yes | Yes |