API MediaQueryList JavaScript

Perekomendan kursus:

Atribut MediaQueryList Objek MediaQueryList

Atribut MediaQueryList Objek yang menyimpan informasi dari pemilihan media.Objek adalahObjek jendela

Atribut MediaQueryList Objek dapat diakses melalui cara berikut:

window.matchMedia() atau hanya dengan matchMedia():

Contoh

const mqlObj = window.matchMedia();
const mqlObj = matchMedia();

Coba sendiri

Lihat juga:

Metode window.matchMedia()

Atribut MediaQueryList

Atribut Deskripsi
matches Bilangan boolean. Jika dokumen cocok dengan permintaan, maka true, jika tidak, false.
media Nilai string. Pemilihan media (daftar).

Metode MediaQueryList

Metode Deskripsi
addListener() Tambahkan fungsi penjaga baru, yang akan dijalankan setiap kali hasil penilaian pemilihan media berubah.
removeListener()

Hapus penjaga yang sebelumnya ditambahkan dari daftar pemilihan media.

Jika penjaga yang ditentukan tidak ada dalam daftar, tak ada tindakan yang dijalankan.

Pemilihan media

matchMedia() Pemilihan media yang dapat digunakan dalam metode ini adalah Atur @media CSS Karakteristik media apa saja, seperti min-height, min-width, orientasi, dan sebagainya.

Contoh

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

Coba sendiri

Jenis media

Nilai Deskripsi
all Baku. Digunakan untuk semua jenis peralatan media.
print Untuk pemakaian cetak.
screen Untuk layar komputer, tablet, ponsel cerdas, dan sebagainya.
speech Peranti bacaan layar untuk membaca halaman dalam suara tinggi.

Karakteristik media

Nilai Deskripsi
any-hover Adakah ada mekanisme input yang tersedia untuk memungkinkan pengguna menempatkan kursor mouse di atas elemen?
(Ditambahkan di Media Queries Level 4).
any-pointer Adakah ada mekanisme input yang tersedia adalah peralatan penunjuk, jika ya, betapa akuratnya?
(Ditambahkan di Media Queries Level 4).
aspect-ratio Rasio lebar tinggi viewport.
color Bit persisnya setiap komponen warna peralatan output.
color-gamut Dalam lingkungan warna yang didukung oleh penggunaan agen dan peralatan output
(Ditambahkan di Media Queries Level 4)
color-index Jumlah warna yang dapat ditampilkan peralatan.
grid Adakah peralatan adalah grid atau bitmap.
height Tinggi viewport.
hover Adakah mekanisme input utama memungkinkan pengguna untuk menempatkan kursor mouse di atas elemen?
(Ditambahkan di Media Queries Level 4)
inverted-colors Adakah pereksa atau sistem operasi dasar membalik warna?
(Ditambahkan di Media Queries Level 4).
light-level Tingkat cahaya lingkungan saat ini (Ditambahkan di Media Queries Level 4).
max-aspect-ratio Rasio lebar tinggi maksimum area tampilan.
max-color Bilangan digit maksimum untuk setiap komponen warna di peralatan output.
max-color-index Jumlah warna yang dapat ditampilkan peralatan.
max-height Tinggi maksimum area tampilan, contohnya jendela pereksa.
max-monochrome Bilangan digit maksimum untuk setiap 'warna' di peralatan monokrom (warna abu-abu).
max-resolution Resolusi maksimum peralatan, menggunakan dpi atau dpcm.
max-width Lebar maksimum area tampilan, contohnya jendela pereksa.
min-aspect-ratio Rasio lebar tinggi paling kecil area tampilan.
min-color Bilangan digit paling kecil untuk setiap komponen warna di peralatan output.
min-color-index Jumlah warna yang dapat ditampilkan peralatan.
min-height Tinggi paling kecil area tampilan, contohnya jendela pereksa.
min-monochrome Bilangan digit paling kecil untuk setiap 'warna' di peralatan monokrom (warna abu-abu).
min-resolution Resolusi paling kecil peralatan, menggunakan dpi atau dpcm.
min-width Lebar paling kecil area tampilan, contohnya jendela pereksa.
monochrome Bilangan digit untuk setiap 'warna' di peralatan monokrom (warna abu-abu).
orientation Arah viewport (mode horizontal atau vertikal).
overflow-block Bagaimana peralatan output memproses kandungan yang melebihi viewport sepanjang sumbu block (Ditambahkan di Media Queries Level 4).
overflow-inline Adakah boleh dijalankan penyebaran kandungan melebihi viewport sepanjang sumbu inline (Ditambahkan di Media Queries Level 4).
pointer Adakah mekanisme input utama adalah peralatan penunjuk? Jika ya, kebenaran yang mana?
(Ditambahkan di Media Queries Level 4).
resolution Resolusi peralatan output, menggunakan dpi atau dpcm.
scan Sasaran pemindai peralatan output.
scripting scripting
Adakah boleh digunakan skrip (contohnya JavaScript) (ditambahkan di Media Queries Level 4)? update
Peranti keluaran boleh berapa cepat mengubah penampilan kandungan (ditambahkan di Media Queries Level 4). width