JavaScript ile medya sorguları nasıl kullanılır
- Önceki sayfa Taşınabilir HTML öğesi
- Sonraki sayfa Dilim işaretleyici
JavaScript ile medya sorguları kullanma
Medya sorguları CSS3'te tanıtıldı ve reaksiyonlu web tasarımının önemli unsurlarından biridir. Medya sorguları, tüm cihazlarda (masaüstü, dizüstü bilgisayar, tablet, telefon vb.) iyi görüntülenmesi için web sayfalarının genişliğini ve yüksekliğini belirlemek için kullanılır.
window.matchMedia() yöntemi, belirtilen CSS medya sorgu dizgisi sonuçlarını temsil eden bir MediaQueryList nesnesi döndürür.matchMedia() yönteminin değeri CSS @media herhangi bir medya özelliği kuralları, örneğin min-height、min-width、orientation vb.
Örnek
Eğer视口宽度小于或等于700像素，则将背景色更改为黄色。如果宽度大于700，则将其更改为粉红色：
function myFunction(x) {
if (x.matches) { // Eğer medya sorgusu eşleşirse
document.body.style.backgroundColor = "yellow";
} else {
document.body.style.backgroundColor = "pink";
}
}
// MediaQueryList nesnesi oluşturun
var x = window.matchMedia("(max-width: 700px)")
// Dinleyici fonksiyonunu çalıştırma sırasında çağırın
myFunction(x);
// Durum değiştiğinde dinleyici fonksiyonunu ekleyin
x.addEventListener("change", function() {
myFunction(x);
});
İlgili sayfalar
Eğitim:CSS medya sorgusu
Eğitim:Reaksiyonlu web tasarımı
İlgili el kitabı:JavaScript window.matchMedia() yöntemi
- Önceki sayfa Taşınabilir HTML öğesi
- Sonraki sayfa Dilim işaretleyici
