JavaScript MediaQueryList API

MediaQueryList nesnesi

MediaQueryList Nesnesi medya sorgusundan gelen bilgileri saklar.

MediaQueryList NesnePencere nesnesiÖzellikleri.

MediaQueryList Nesnesi aşağıdaki şekilde erişilebilir:

window.matchMedia() veya yalnızca matchMedia():

Örnek

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

Kişisel olarak deneyin

Ayrıca bkz.:

window.matchMedia() yöntemi

MediaQueryList özelliği

Özellik Açıklama
matches Booleen değer. Belge sorguyla eşleşiyorsa trueise false.
media Dizgi değeri. Medya sorgusu (listesi).

MediaQueryList yöntemi

Yöntem Açıklama
addListener() Yeni dinleyici fonksiyonunu ekleyin, medya sorgusunun değerlendirme sonucu her değiştiğinde bu fonksiyon çalışır.
removeListener()

Önceden eklenen dinleyici fonksiyonunu medya sorgusu listesinden kaldırın.

Belirtilen dinleyici listesinde değilse, hiçbir işlem yapılmaz.

Medya sorgusu

matchMedia() Yöntemin medya sorgusu şu şekilde olabilir CSS @media kuralı Herhangi bir medya özelliği, min-height, min-width, orientation vb. gibi.

Örnek

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

Kişisel olarak deneyin

Medya türü

Değer Açıklama
all Varsayılan. Tüm medya türü cihazları için kullanılır.
print Yazıcılar için.
screen Bilgisayar ekranı, tablet, akıllı telefonlar vb. için.
speech Sayfayı yüksek sesle "okuyan" ekran okuyucuları için.

Medya özellikleri

Değer Açıklama
any-hover Herhangi bir kullanılabilir girdi mekanizması, kullanıcıya element üzerinde durma olanağı sağlar mı?
（Media Queries Level 4'te eklendi).
any-pointer Herhangi bir kullanılabilir girdi mekanizması var mı, varsa, bu ne kadar doğru?
（Media Queries Level 4'te eklendi).
aspect-ratio Görünümün genişlik-yükseklik oranı.
color Çıktı cihazının her renk bileşeninin bit sayısı.
color-gamut Kullanıcı aracı ve çıktı cihazı tarafından desteklenen yaklaşık renk aralığı
（Media Queries Level 4'te eklendi)
color-index Cihazın gösterebileceği renk sayısı.
grid Cihaz ağır mı yoksa bitmapped mi?
height Pencere yüksekliği.
hover Ana giriş mekanizması, kullanıcıların eleman üzerinde fareni geçirmesine izin veriyor mu?
（Media Queries Level 4'te eklendi)
inverted-colors Tarayıcı veya alt taban işletim sisteminde renklerin tersi dönüyor mu?
（Media Queries Level 4'te eklendi).
light-level Mevcut aydınlatma seviyesi (Media Queries Level 4'te eklendi).
max-aspect-ratio Görüntüleme alanının en büyük genişlik-yükseklik oranı.
max-color Cihazın her renk bileşeninin en büyük bit sayısı.
max-color-index Cihazın gösterebileceği en büyük renk sayısı.
max-height Görüntüleme alanının en büyük yüksekliği, örneğin tarayıcı penceresi.
max-monochrome Tek renkli (gri tonlamalı) cihazlarda her 'renk' için en büyük bit sayısı.
max-resolution Cihazın en büyük çözünürlüğü, dpi veya dpcm kullanılarak belirtin.
max-width Görüntüleme alanının en büyük genişliği, örneğin tarayıcı penceresi.
min-aspect-ratio Görüntüleme alanının en küçük genişlik-yükseklik oranı.
min-color Cihazın her renk bileşeninin en küçük bit sayısı.
min-color-index Cihazın gösterebileceği en küçük renk sayısı.
min-height Görüntüleme alanının en küçük yüksekliği, örneğin tarayıcı penceresi.
min-monochrome Tek renkli (gri tonlamalı) cihazlarda her 'renk' için en küçük bit sayısı.
min-resolution Cihazın en küçük çözünürlüğü, dpi veya dpcm kullanılarak belirtin.
min-width Görüntüleme alanının en küçük genişliği, örneğin tarayıcı penceresi.
monochrome Tek renkli (gri tonlamalı) cihazlarda her 'renk' için bit sayısı.
orientation Pencere yönlendirme (yatay veya dikey mod).
overflow-block Cihaz, pencerenin dışına taşan blok eksenindeki içerikleri nasıl işler (Media Queries Level 4'te eklendi)?
overflow-inline İç çizgideki içerik, pencerenin dışına taşan içerik içe aktarılabiliyor mu (Media Queries Level 4'te eklendi)?
pointer Ana giriş mekanizması bir işaret cihazı mı? Eğer öyleyse, doğruluk düzeyi nasıl?
（Media Queries Level 4'te eklendi).
resolution Cihazın çözünürlüğü, dpi veya dpcm kullanılarak belirtin.
scan Cihazın tarayım sürecini çıkarın.
scripting Senaryo (örneğin JavaScript) kullanılabilir mi? (Media Queries Level 4'te eklendi)
update Çıktı cihazının içeriğin görünümünü ne kadar hızlı değiştirebileceği (Media Queries Level 4'te eklendi).
width Görünüm genişliği。