Bekerja dengan pertanyaan media JavaScript

Pertanyaan Media JavaScript: Beyond Window Resize

Mata air apa yang perlu difikirkan apabila anda memikirkan pertanyaan media? Kemungkinan, peraturan CSS seperti ini:

 badan {
  latar belakang warna: plum;
}

@media (min-lebar: 768px) {
  badan {
    latar belakang warna: tomato;
  }
}

Pertanyaan media CSS adalah asas kepada reka bentuk responsif, menggunakan gaya berdasarkan saiz viewport, jenis peranti, keutamaan (skema warna, gerakan), dan banyak lagi. Tetapi JavaScript juga menawarkan keupayaan pertanyaan media, sering berharga untuk membuat plugin responsif atau elemen menyesuaikan secara dinamik berdasarkan keadaan skrin.

Tidak seperti CSS, pengendalian pertanyaan media JavaScript berbeza. Konsep teras tetap sama: keadaan perlawanan dan memohon tindakan.

Menggunakan matchMedia()

Kaedah matchMedia() menentukan jika pertanyaan media sepadan dengan keadaan dokumen semasa. Walaupun berada di Modul Model Objek CSS Modul Modul Kerja, sokongan penyemak imbas sangat baik.

Cermin penggunaan CSS: Lulus rentetan pertanyaan media ke matchMedia() dan periksa harta .matches .

 // Tentukan pertanyaan
const MediaQuery = window.matchmedia ('(min-lebar: 768px)');

matchMedia() mengembalikan objek MediaQueryList . Hartanahnya .matches

 // Buat keadaan media untuk paparan sekurang -kurangnya 768px lebar
const MediaQuery = window.matchmedia ('(min-lebar: 768px)');
// periksa jika pertanyaan media sepadan
jika (mediaquery.matches) {
  // mencetuskan tindakan
  Alert ('pertanyaan media dipadankan!');
}

Ini mengendalikan cek tunggal. Untuk pemantauan berterusan, kami memerlukan pendengar acara.

Mendengar perubahan

MediaQueryList menyediakan addListener() (dan removeListener() ) untuk mendaftarkan fungsi panggilan balik ( .onchange event) dicetuskan apabila status pertanyaan media berubah. Ini membolehkan tindakan responsif kepada keadaan yang dikemas kini.

 // Buat syarat untuk paparan sekurang -kurangnya 768px lebar
const MediaQuery = window.matchmedia ('(min-lebar: 768px)');

fungsi handletabletchange (e) {
  // periksa jika pertanyaan media sepadan
  jika (e.matches) {
    // melaksanakan tindakan
    console.log ('pertanyaan media dipadankan!');
  } else {
    console.log ('pertanyaan media tidak dapat ditandingi!');
  }
}

// Daftar pendengar acara
MediaQuery.AddListener (handletableTchange);

// cek awal
HandleTableTchange (MediaQuery);

addListener() tidak segera api; Anda mesti memanggil pengendali secara manual dengan objek MediaQueryList sebagai hujah.

Pendekatan "lama"

Sebagai perbandingan, kaedah yang lebih lama menggunakan pendengar acara resize dengan window.innerWidth atau window.innerHeight . Ini kurang cekap dan kurang serba boleh.

 fungsi checkMediaQuery () {
  // Periksa jika lebar dalaman tetingkap lebih besar daripada 768px
  jika (window.innerWidth> 768) {
    // melaksanakan tindakan
    console.log ('pertanyaan media dipadankan!');
  }
}

// Tambahkan pendengar untuk acara mengubah saiz tetingkap
window.addeventListener ('saiz semula', checkMediaQuery);

Ini adalah intensif prestasi dan terhad kepada pemeriksaan saiz viewport, tidak seperti pendekatan matchMedia() yang lebih kuat.

Kesimpulan

matchMedia() dan MediaQueryList menyediakan pengendalian pertanyaan media JavaScript yang mantap, membolehkan pemeriksaan satu kali dan berterusan, bertindak balas terhadap perubahan dalam pelbagai keadaan di luar saiz paparan yang mudah. Pendengar acara resize yang lebih tua tetap berfungsi tetapi kurang efisien dan kurang kaya. Fleksibiliti matchMedia() menjadikannya kaedah pilihan untuk pembangunan JavaScript responsif moden.

Berikut adalah contoh yang menunjukkan keupayaan tidak tersedia dengan kaedah lama: mengesan orientasi landskap. Ini sering digunakan dalam pembangunan permainan HTML5.

Atas ialah kandungan terperinci Bekerja dengan pertanyaan media JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!