Nasıl Yapılır - JavaScript ile Medya Sorguları
Örnek
Görüntü alanı 700 piksel genişliğinde veya daha küçükse, arka plan rengini sarıya değiştirin. 700'den büyükse, pembeye değiştirin
function myFunction(x) {
if (x.matches) { // If media
query matches
document.body.style.backgroundColor = "yellow";
} else {
document.body.style.backgroundColor = "pink";
}
}
var x = window.matchMedia("(max-width: 700px)")
myFunction(x) // Call
listener function at run time
x.addListener(myFunction) // Attach listener
function on state changes
JavaScript ile Medya Sorgularını Kullanma
Medya sorguları CSS3'te tanıtıldı ve duyarlı web tasarımının temel bileşenlerinden biridir. Web sayfalarının tüm cihazlarda (masaüstü bilgisayarlar, dizüstü bilgisayarlar, tabletler, telefonlar, vb.) iyi görünmesini sağlamak için bir görünümün genişliğini ve yüksekliğini belirlemek için medya sorguları kullanılır.
window.matchMedia() yöntemi, belirtilen CSS ortam sorgusu dizesinin sonuçlarını temsil eden bir MediaQueryList nesnesi döndürür . matchMedia() yönteminin değeri, CSS @media kuralının min-height, min-width, oryantasyon gibi medya özelliklerinden herhangi biri olabilir.
CSS Medya Sorguları Eğitimimizde medya sorguları hakkında daha fazla bilgi edinin.
Duyarlı Web Tasarımı Eğitimimizde duyarlı tasarım hakkında daha fazla bilgi edinin.
JavaScript Referansımızda window.matchMedia() yöntemi hakkında daha fazla bilgi edinin .