Pertanyaan JavaScript dan Media: Panduan Komprehensif

Pertanyaan media ialah ciri CSS berkuasa yang digunakan untuk menggunakan gaya berdasarkan ciri peranti pengguna, seperti lebar skrin, ketinggian atau peleraian. JavaScript meningkatkan utiliti pertanyaan media dengan mendayakan respons dinamik kepada perubahan dalam keadaan ini, memberikan kawalan yang lebih besar terhadap cara aplikasi bertindak merentas peranti yang berbeza.

1. Apakah Pertanyaan Media?

Pertanyaan media membenarkan pembangun mentakrifkan peraturan CSS yang digunakan secara bersyarat, berdasarkan sifat peranti atau port pandangan pengguna.

Sintaks Asas dalam CSS:

@media (max-width: 768px) {
  body {
    background-color: lightblue;
  }
}

Dengan JavaScript, anda boleh berinteraksi secara dinamik dengan pertanyaan media ini menggunakan kaedah Window.matchMedia().

2. Menggunakan JavaScript dengan Pertanyaan Media

Kaedah Window.matchMedia() membolehkan anda menguji pertanyaan media secara pengaturcaraan dan bertindak balas kepada perubahan dalam masa nyata.

Sintaks:

const mediaQuery = window.matchMedia("(max-width: 768px)");

Semak sama ada Pertanyaan Padanan:

if (mediaQuery.matches) {
  console.log("Viewport is 768px or smaller.");
} else {
  console.log("Viewport is larger than 768px.");
}

3. Mendengar Perubahan Pertanyaan Media

Anda boleh menggunakan kaedah addEventListener untuk mendengar perubahan dalam keadaan pertanyaan media.

Contoh:

const mediaQuery = window.matchMedia("(max-width: 768px)");

function handleMediaQueryChange(e) {
  if (e.matches) {
    console.log("Now in mobile view.");
  } else {
    console.log("Now in desktop view.");
  }
}

// Attach listener
mediaQuery.addEventListener("change", handleMediaQueryChange);

Pendekatan ini bertindak balas secara dinamik kepada perubahan viewport tanpa memerlukan muat semula halaman.

4. Kes Penggunaan Biasa

a) Pelarasan Reka Letak Dinamik

Tukar reka letak dipacu JavaScript berdasarkan saiz skrin.

const mediaQuery = window.matchMedia("(max-width: 768px)");

function adjustLayout() {
  if (mediaQuery.matches) {
    document.body.style.backgroundColor = "lightblue";
  } else {
    document.body.style.backgroundColor = "white";
  }
}

// Initial check and listener
adjustLayout();
mediaQuery.addEventListener("change", adjustLayout);

b) Skrip Memuatkan Bersyarat

Muat atau jalankan skrip hanya apabila syarat tertentu dipenuhi.

const mediaQuery = window.matchMedia("(max-width: 768px)");

if (mediaQuery.matches) {
  // Load mobile-specific script
  import("./mobile.js").then(module => {
    module.init();
  });
}

c) Melaraskan Animasi

Lumpuhkan animasi pada peranti yang lebih kecil untuk meningkatkan prestasi.

@media (max-width: 768px) {
  body {
    background-color: lightblue;
  }
}

5. Faedah Menggabungkan JavaScript dan Pertanyaan Media

1. Gelagat Dinamik: Bertindak balas terhadap perubahan skrin tanpa memuatkan semula halaman.
2. Pengoptimuman Prestasi: Muatkan sumber atau skrip secara bersyarat.
3. Kebolehcapaian Dipertingkat: Sesuaikan dengan pilihan pengguna seperti gerakan yang dikurangkan.
4. UX yang dipertingkatkan: Sesuaikan interaksi kepada peranti dan port pandangan yang berbeza.

6. Amalan Terbaik

• Gabungkan CSS dan JavaScript: Gunakan CSS untuk penggayaan dan JavaScript untuk logik.
• Nyahlantunkan Semula Saiz Peristiwa: Apabila membalas saiz semula tetingkap, nyahpantun acara tersebut untuk mengelakkan masalah prestasi.
• Kemunduran: Sentiasa sertakan gelagat lalai untuk penyemak imbas yang tidak disokong.
• Gunakan Sintaks Moden: Lebih suka addEventListener daripada addListener yang ditamatkan.

7. Keserasian Penyemak Imbas

Kebanyakan pelayar moden menyokong sepenuhnya Window.matchMedia() API. Walau bagaimanapun, penyemak imbas lama mungkin memerlukan polyfill untuk kaedah addEventListener pada MediaQueryList.

8. Contoh: Menu Navigasi Responsif

Berikut ialah contoh praktikal menggabungkan pertanyaan media dan JavaScript untuk mengurus menu responsif.

const mediaQuery = window.matchMedia("(max-width: 768px)");

9. Kesimpulan

Dengan menggabungkan JavaScript dan pertanyaan media, anda boleh mencapai reka bentuk yang sangat dinamik dan responsif. Pendekatan ini membolehkan penyesuaian masa nyata kepada pilihan pengguna dan ciri peranti, meningkatkan prestasi dan pengalaman pengguna. Menguasai teknik ini adalah penting untuk membina aplikasi web moden yang mesra peranti.

Hai, saya Abhay Singh Kathayat!
**Saya seorang pembangun tindanan penuh dengan kepakaran dalam kedua-dua teknologi hadapan dan belakang. Saya bekerja dengan pelbagai bahasa pengaturcaraan dan rangka kerja untuk membina aplikasi yang cekap, berskala dan mesra pengguna.
Jangan ragu untuk menghubungi saya melalui e-mel perniagaan saya: **kaashshorts28@gmail.com.

Atas ialah kandungan terperinci Pertanyaan JavaScript dan Media: Membina Aplikasi Web Responsif dan Dinamik. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!