Cara Menggunakan Pertanyaan Media di JavaScript dengan MatchMedia

mata teras

Pertanyaan media yang asalnya digunakan untuk reka bentuk responsif dalam CSS juga boleh digunakan dalam JavaScript untuk menyesuaikan kandungan atau fungsi berdasarkan ciri -ciri peranti seperti saiz skrin, resolusi, dan orientasi.
API
• dalam JavaScript membolehkan pengesanan perubahan status pertanyaan media CSS3. Ia mengembalikan objek window.matchMedia yang boleh digunakan untuk menentukan sama ada pertanyaan media tertentu sepadan dengan peranti semasa dan boleh menambah pendengar acara sebagai tindak balas kepada perubahan. MediaQueryList
pertanyaan media JavaScript disokong secara meluas dalam pelayar moden dan menyediakan cara yang boleh dipercayai untuk membuat reka bentuk responsif. Mereka boleh digunakan bersempena dengan pertanyaan media CSS, dan pelbagai perpustakaan seperti enquire.js dan matchmedia.js dapat memudahkan proses menulis dan menguruskan pertanyaan ini.

Artikel ini ditulis pada tahun 2011 dan dikemas kini pada tahun 2018 . Apabila reka bentuk responsif mula diperkenalkan, ia merupakan salah satu konsep susun atur web yang paling menarik sejak CSS mengambil grid perwakilan. Teknologi yang mendasari menggunakan pertanyaan media untuk menentukan jenis, lebar, ketinggian, orientasi, resolusi, nisbah aspek, dan kedalaman warna peranti tontonan untuk menyediakan helaian gaya yang berbeza. Jika anda berfikir reka bentuk responsif terhad kepada susun atur CSS, anda akan dengan senang hati mendengar bahawa pertanyaan media juga boleh digunakan dalam JavaScript, yang akan dijelaskan dalam artikel ini.

pertanyaan media dalam CSS

Dalam contoh berikut,

disediakan untuk semua peranti. Walau bagaimanapun, jika lebar mendatar skrin adalah 500 piksel atau lebih, ia juga akan dihantar cssbasic.css: csswide.css

<link rel="stylesheet" media="all" href="cssbasic.css" />
<link rel="stylesheet" media="(min-width: 500px)" href="csswide.css" />

kemungkinan tidak berkesudahan, dan teknologi telah digunakan untuk masa yang lama oleh kebanyakan laman web di Internet. Melaraskan saiz lebar penyemak imbas akan mencetuskan perubahan dalam susun atur halaman. Hari ini, menggunakan pertanyaan media menjadikannya mudah untuk mengubah saiz reka bentuk atau elemen dalam CSS. Tetapi bagaimana jika anda perlu menukar kandungan atau ciri? Sebagai contoh, pada skrin yang lebih kecil, anda mungkin mahu menggunakan tajuk yang lebih pendek, perpustakaan JavaScript yang lebih sedikit, atau mengubah suai operasi widget. Saiz viewport boleh dianalisis dalam JavaScript, tetapi ini agak mengelirukan:

Kebanyakan penyemak imbas menyokong
• dan window.innerWidth. (Versi mod pelik sebelum IE 10 memerlukan window.innerHeight dan document.body.clientWidth.) document.body.clientHeight
• window.onresize Semua penyemak imbas utama menyokong
dan
• , tetapi ia tidak konsisten. Bergantung pada penyemak imbas dan mod, saiz tetingkap atau dokumen akan dikembalikan. document.documentElement.clientWidth document.documentElement.clientHeight
Walaupun anda berjaya mengesan perubahan dalam saiz viewport, anda mesti mengira faktor seperti arah dan nisbah aspek sendiri. Tidak ada jaminan bahawa ia sepadan dengan andaian penyemak imbas apabila menggunakan peraturan pertanyaan media dalam CSS.

bagaimana menulis pertanyaan media menggunakan kod javascript

bernasib baik, adalah mungkin untuk bertindak balas terhadap perubahan dalam status pertanyaan media CSS3 dalam JavaScript. API utama ialah window.matchMedia. Ini akan lulus rentetan yang sama seperti rentetan pertanyaan media yang digunakan dalam pertanyaan media CSS:

<link rel="stylesheet" media="all" href="cssbasic.css" />
<link rel="stylesheet" media="(min-width: 500px)" href="csswide.css" />

Atribut

matches pulangan atribut true atau false berdasarkan hasil pertanyaan. Contohnya:

const mq = window.matchMedia("(min-width: 500px)");

anda juga boleh menambah pendengar acara bahawa kebakaran apabila perubahan dikesan:

if (mq.matches) {
  // 窗口宽度至少为 500 像素
} else {
  // 窗口宽度小于 500 像素
}

anda juga harus menghubungi pengendali secara langsung selepas menentukan peristiwa tersebut. Ini akan memastikan bahawa kod anda dapat dimulakan sendiri semasa atau selepas memuat halaman. Tanpa itu,

tidak akan dipanggil jika pengguna tidak menukar saiz penyemak imbas. Pada masa penulisan, WidthChange() mempunyai sokongan penyemak imbas yang sangat baik dalam setiap cara, jadi tidak ada sebab untuk tidak menggunakannya dalam persekitaran pengeluaran. Semak teks demonstrasi berikut untuk berubah secara dinamik dari "lebih daripada 500 piksel" hingga "kurang daripada 500 piksel" bergantung pada saiz tetingkap penyemak imbas anda. Atau, muat turun kod sampel: matchMedia pautan demo codepen

soalan yang sering ditanya mengenai pertanyaan media JavaScript (FAQ)

(bahagian Soalan Lazim harus dipelihara dan diperbaiki di sini untuk menjadikannya lebih ringkas dan lebih jelas dan menggunakan format yang lebih jelas.) Cadangan Penambahbaikan:

Gunakan lebih banyak bahasa ringkas:
• Elakkan penjelasan yang berlebihan.
Gunakan format yang lebih jelas:
• Gunakan senarai atau jadual untuk mengatur soalan dan jawapan.
Jawapan yang lebih tepat:
• Pastikan jawapannya tepat dan elakkan ungkapan samar -samar.
Tambah kod sampel:
• Menyediakan contoh kod pendek untuk lebih banyak masalah teknikal.
Dengan penambahbaikan di atas, bahagian FAQ boleh dibuat lebih mudah untuk dibaca dan difahami.

Atas ialah kandungan terperinci Cara Menggunakan Pertanyaan Media di JavaScript dengan MatchMedia. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!