Metode Window matchMedia()

Definisi dan Penggunaan

matchMedia() Metode ini mengembalikan MediaQueryList dengan hasil query.

Lihat pula:

Objek MediaQueryList

Media Query

Media query yang dapat digunakan dalam metode matchMedia() dapat berupa kriteria media CSS @media yang mana pun, seperti min-height, min-width, orientasi, dll.

Contoh

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

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

Contoh

Contoh 1

Apakah layar/layar tampilan lebih besar dari 700 piksel lebar:

if (window.matchMedia("(max-width: 700px)").matches) {
  // Lebar layar kurang dari atau sama dengan 700 piksel
}
  // Lebar layar lebih besar dari 700 piksel
}

cobalah sendiri

Penjelasan Contoh

Contoh ini menjalankan media query dan membandingkan dengan status jendela saat ini.

Untuk menjalankan media query yang ber�� berdasarkan perubahan status jendela, tambahkan penjaga peristiwa ke objek MediaQueryList (lihat di bawah "Contoh Lebih Banyak"):

Contoh 2

Jika lebar layar kurang dari atau sama dengan 500 piksel, atur warna latar belakang menjadi kuning, sebaliknya warna latar belakang menjadi merah jambu:

// Membuat fungsi match
function myFunction(x) {
  if (x.matches) {
    document.body.style.backgroundColor = "yellow";
  }
    document.body.style.backgroundColor = "pink";
  }
}
// // Membuat objek MediaQueryList
const mmObj = window.matchMedia("(max-width: 700px)");
// Panggil fungsi match dalam waktu eksekusi:
myFunction(mmObj);
// Menambahkan fungsi match sebagai pendengar perubahan status:
mmObj.addListener(myFunction);

cobalah sendiri

syntaks

window.matchMedia("mediaQuery)

parameter

parameter Deskripsi
mediaQuery Diperlukan. Menunjukkan string media query.

Nilai Kembalian

Tipe Deskripsi
Objek Objek MediaQueryList dengan hasil media query.

Dukungan Peramban

Semua peramban mendukung matchMedia():

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Dukungan 11 Dukungan Dukungan Dukungan Dukungan