Μέθοδος matchMedia() του Window

  • Προηγούμενη σελίδα location
  • Επόμενη σελίδα moveBy()
  • Επιστροφή στο προηγούμενο επίπεδο Όντα Window

Ορισμός και χρήση

matchMedia() Η μέθοδος επιστρέφει ένα αντικείμενο MediaQueryList με τα αποτελέσματα της ερώτησης.

Για περισσότερες πληροφορίες:

Αντικείμενο MediaQueryList

Ερωτήσεις του μέσου ερευνητή

Η ερώτηση του μέσου ερευνητή μπορεί να είναι οποιαδήποτε χαρακτηριστική του CSS @media κανόνα, όπως min-height, min-width, orientation κ.λπ.

Παράδειγμα

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

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

Παράδειγμα

Παράδειγμα 1

Είναι το πλάτος της οθόνης ή του παραθύρου μεγαλύτερο από 700 εικονοστοιχεία;

if (window.matchMedia("(max-width: 700px)").matches) {
  // Το πλάτος της οθόνης είναι ή μικρότερο από 700 εικονοστοιχεία
}
  // Το πλάτος της οθόνης είναι μεγαλύτερο από 700 εικονοστοιχεία
}

δοκιμάστε το προσωπικά

Διευκρινίσεις παράδειγματος

Αυτό το παράδειγμα εκτελεί την ερώτηση του μέσου ερευνητή και συγκρίνει την τρέχουσα κατάσταση του παραθύρου.

Για να εκτελείτε ανταποκρινόμενες σε μέγεθος οθόνης ερωτήσεις κατά την αλλαγή κατάστασης του παραθύρου, προσθέστε παρατηρητές γεγονότων στο αντικείμενο MediaQueryList (βλέπε παρακάτω "Περισσότερες παραδείγματα"):

Παράδειγμα 2

Αν το πλάτος της οθόνης είναι ή μικρότερο από 500 εικονοστοιχεία, τότε ορίζεται το χρώμα του παρασκηνίου σε κίτρινο, αλλιώς σε ροζ:

// Δημιουργία της λειτουργίας match
function myFunction(x) {
  if (x.matches) {
    document.body.style.backgroundColor = "yellow";
  }
    document.body.style.backgroundColor = "pink";
  }
}
// Δημιουργία αντικειμένου MediaQueryList
const mmObj = window.matchMedia("(max-width: 700px)");
// Κλήση της λειτουργίας match κατά τη διάρκεια της εκτέλεσης:
myFunction(mmObj);
// Προσθήκη της λειτουργίας match ως παρατηρητή της αλλαγής κατάστασης:
mmObj.addListener(myFunction);

δοκιμάστε το προσωπικά

συμβόλου γραμματικής

window.matchMedia("mediaQuery)

παράμετροι

παράμετροι Περιγραφή
mediaQuery Απαιτείται. Εμφανίζει την αλφαβητική αλληλουχία της ερώτησης για τα μέσα.

Αποτελεσματική τιμή

Τύπος Περιγραφή
Σώμα Ο Σώμας MediaQueryList με αποτελέσματα ερωτημάτων για τα μέσα

Υποστήριξη περιηγητή

Όλοι οι περιηγητές υποστηρίζουν matchMedia():

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Υποστήριξη 11 Υποστήριξη Υποστήριξη Υποστήριξη Υποστήριξη
  • Προηγούμενη σελίδα location
  • Επόμενη σελίδα moveBy()
  • Επιστροφή στο προηγούμενο επίπεδο Όντα Window