Travailler avec JavaScript Media Queries

Requêtes média javascript: au-delà

Qu'est-ce qui vous vient à l'esprit lorsque vous pensez des requêtes médiatiques? Probablement, CSS fait des règles comme ceci:

 corps {
  Color d'arrière-plan: Plum;
}

@Media (Min-Width: 768px) {
  corps {
    Color en arrière-plan: tomate;
  }
}

Les requêtes de médias CSS sont fondamentales pour réactif la conception, appliquant des styles basés sur la taille de la fenêtre, le type d'appareil, les préférences (schéma de couleurs, le mouvement), et plus encore. Mais JavaScript propose également des capacités de requête multimédia, souvent précieuses pour créer des plugins réactifs ou ajuster dynamiquement des éléments en fonction des conditions d'écran.

Contrairement à CSS, la manipulation de la requête multimédia de JavaScript diffère. Le concept de base reste le même: faire correspondre les conditions et appliquer des actions.

Utilisation de matchMedia()

La méthode matchMedia() détermine si une requête multimédia correspond à l'état de document actuel. En dépit d'être dans le projet de travail du module du modèle d'objet CSS, la prise en charge du navigateur est excellente.

L'utilisation reflète CSS: passez une chaîne de requête multimédia à matchMedia() et vérifiez la propriété .matches .

 // définir la requête
const MediaQuery = Window.matchMedia ('(Min-Width: 768px)');

matchMedia() renvoie un objet MediaQueryList . Sa propriété .matches (Boolean en lecture seule) indique si le document correspond à la requête.

 // Créer une condition multimédia pour les fenêtres d'au moins 768px de large
const MediaQuery = Window.matchMedia ('(Min-Width: 768px)');
// Vérifiez si la requête multimédia correspond
if (mediaQuery.matches) {
  // déclenche une action
  alert («Media Query Matched!»);
}

Cela gère les vérifications simples. Pour une surveillance continue, nous avons besoin d'auditeurs d'événements.

Écoute des changements

MediaQueryList fournit addListener() (et removeListener() ) pour enregistrer une fonction de rappel (événement .onchange ) déclenché lorsque l'état de la requête multimédia change. Cela permet des actions réactives aux conditions mises à jour.

 // Créer une condition pour les fenêtres d'au moins 768px de large
const MediaQuery = Window.matchMedia ('(Min-Width: 768px)');

fonction handletabletchange (e) {
  // Vérifiez si la requête multimédia correspond
  if (e.matches) {
    // effectuer une action
    Console.log («Media Query Matched!»);
  } autre {
    Console.log ('Media Query inégalé!');
  }
}

// Enregistrer l'écouteur des événements
MediaQuery.AddListener (HandleTablEtchange);

// Vérification initiale
HandleTablEtchange (MediaQuey);

addListener() ne tire pas immédiatement; Vous devez appeler manuellement le gestionnaire avec l'objet MediaQueryList comme argument.

La "vieille" approche

À titre de comparaison, l'ancienne méthode utilise un écouteur d'événements resize avec window.innerWidth ou window.innerHeight . C'est moins efficace et moins polyvalent.

 fonction checkmediaQuery () {
  // Vérifiez si la largeur intérieure de la fenêtre est supérieure à 768px
  if (window.innerwidth> 768) {
    // effectuer une action
    Console.log («Media Query Matched!»);
  }
}

// Ajouter un auditeur pour les événements de rediffusion des fenêtres
window.addeventListener («redimensi», checkmediaQuery);

Ceci est à forte intensité de performance et limité aux vérifications de la taille de la fenêtre, contrairement à l'approche matchMedia() plus puissante.

Conclusion

matchMedia() et MediaQueryList fournissent une manipulation de requête multimédia JavaScript robuste, permettant des vérifications uniques et continues, réagissant aux modifications dans diverses conditions au-delà de la taille de la vision simple. L'ancien écouteur d'événements resize reste fonctionnel mais est moins efficace et moins riche en fonctionnalités. La flexibilité de matchMedia() en fait la méthode préférée pour le développement de JavaScript réactif moderne.

Voici un exemple démontrant une capacité indisponible avec l'ancienne méthode: détecter l'orientation du paysage. Ceci est fréquemment utilisé dans le développement de jeux HTML5.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!