Πώς να χρησιμοποιήσετε το JavaScript για ερωτήσεις μέσων

Χρήση JavaScript για ερωτήσεις μέσων

Η ερώτηση μέσων εισήχθη στο CSS3 και είναι ένα από τα κύρια στοιχεία της εικονικής σελίδας που ανταποκρίνεται. Η ερώτηση μέσων χρησιμοποιείται για να καθορίσει το πλάτος και το ύψος του οπτικού πεδίου, ώστε η ιστοσελίδα να εμφανίζεται καλά σε όλα τα εξοπλισμό (πρόγραμμα επιφάνειας εργασίας, φορητό υπολογιστή, ταμπλέτα, κινητό τηλέφωνο κ.λπ.).

window.matchMedia() Η μέθοδος return μια αντικειμενικήλειτουργία MediaQueryList που αντιπροσωπεύει το αποτέλεσμα της συγκεκριμένης αίτησης CSS μέσων.matchMedia() Η τιμή της μεθόδου μπορεί να είναι CSS @media Οποιαδήποτε μέθοδος μέσων, όπως min-height、min-width、orientation κ.λπ.

Παράδειγμα

Αν το πλάτος του οπτικού πεδίου είναι μικρότερο ή ίσο με 700 pixel, τότε αλλάξτε το χρώμα του παρασκηνίου σε κίτρινο. Αν το πλάτος είναι μεγαλύτερο από 700, τότε αλλάξτε το σε ρόδο:

function myFunction(x) {
  if (x.matches) { // Αν η ερώτηση για τα μέσα καταγράφεταιIf media query matches
    document.body.style.backgroundColor = "yellow";
  } else {
    document.body.style.backgroundColor = "pink";
  }
}
// Δημιουργία αντικειμένου MediaQueryList
var x = window.matchMedia("(max-width: 700px)");
// Καλέστε τη συνάρτηση ακρόασης κατά τη διάρκεια της εκτέλεσης
myFunction(x);
// Προσθήκη συνάρτησης ακρόασης κατά την αλλαγή του status
x.addEventListener("change", function() {
  myFunction(x);
);

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

Σχετικές σελίδες

Εκμάθηση:CSS 媒体查询

Εκμάθηση:Εικονική σελίδα που ανταποκρίνεται

Παράδειγμα Εγχειριδίου:Μέθοδος window.matchMedia() του JavaScript