Exporter (0) Imprimer
Développer tout
Informations
Le sujet que vous avez demandé est indiqué ci-dessous. Toutefois, ce sujet ne figure pas dans la bibliothèque.

Requêtes de média et écouteurs

Windows Internet Explorer 9 prend désormais en charge les requêtes de média en CSS, HTML, XML et XHTML. Internet Explorer 10 et les applications du Windows Store en JavaScript prennent en charge des écouteurs de requête de média. Les requêtes de média permettent aux développeurs Web d’attribuer une feuille de style à un ensemble de fonctionnalités précises d’un appareil et les écouteurs de requête de média vous permettent d’utiliser un script pour réagir aux modifications apportées au média ou à l’environnement dans lequel s’exécute la page.

Requêtes de média

Les requêtes de média vous permettent de concevoir des pages de façon différentes pour les utilisateurs qui naviguent sur un appareil mobile (avec un petit écran, une palette de couleurs limitée, une basse résolution, etc), sur un miniportable (petit écran, palette de couleurs complète, haute résolution, etc) ou sur un ordinateur standard (grand écran, palette de couleurs complète, haute résolution, etc). La liste complète des propriétés de média prises en charge par les requêtes de média CSS3 comprend width, height, device-width, device-height, orientation, aspect-ratio, device-aspect-ratio, color, color-index, monochrome et resolution.

La déclaration suivante est une requête de média typique, à l’aide de la règle @media.


@media screen and (max-width:400px) {div {border:none;}}

Dans ce cas, l’écran indique le type de média cible et max-width est la propriété de média cible. La déclaration indique que les règles spécifiées (pas de bordure sur les éléments div) ne s’appliquent que quand la page est affichée sur un écran dont la largeur est au maximum de 400 pixels. Vous pouvez utiliser les propriétés de média ensemble pour créer des requêtes encore plus spécifiques, telles que la suivante.


@media screen and (max-width:400px) and (max-height:600px) {…}

Cette déclaration applique les règles spécifiées quand le média est un écran dont la largeur ne dépasse pas 400 pixels et la hauteur 600 pixels.

Écouteurs de requête de média

Les écouteurs de requête de média activent deux nouvelles fonctionnalités décrites plus loin dans cette rubrique :

  • Évaluation d’une requête de média au moment de l’exécution avec JavaScript
  • Abonnement des écouteurs aux modifications dans l’évaluation de la requête de média

Création d’un écouteur de requête de média

Pour évaluer une requête de média au moment de l’exécution, un objet MediaQueryList est créé à l’aide de la nouvelle méthode matchMedia.

MéthodeDescription

matchMedia(sList)

Accepte une chaîne qui contient une ou plusieurs requêtes de média et retourne un objet MediaQueryList.

 

La méthode matchMedia accepte une chaîne de requête de média et retourne un objet MediaQueryList. L’exemple suivant crée une requête de média qui vérifie si la largeur ou la hauteur d’une fenêtre est inférieure à une certaine taille.


mql = window.msMatchMedia("(min-width:450px)");

L’objet MediaQueryList prend en charge les propriétés suivantes.

PropriétéDescription

matches

Retourne "true" si la liste des requêtes de média correspond à l’état de la fenêtre active ; retourne "false" si ce n’est pas le cas.

media

Retourne la version sérialisée de la liste des requêtes de média utilisée pour créer l’objet MediaQueryList.

 

L’objet MediaQueryList prend en charge les méthodes suivantes.

MéthodeDescription

addListener(callback)

Ajoute la fonction de rappel à la liste des écouteurs pour l’objet MediaQueryList. La fonction est appelée à chaque fois que l’évaluation de la requête de média change.

removeListener(callback)

Supprime la fonction de rappel donnée de la liste des écouteurs pour l’objet MediaQueryList.

 

La propriété matches est une valeur booléenne qui retourne une évaluation de la requête de média. À partir de l’exemple ci-dessus, matches retourne true si la largeur de la fenêtre est supérieure ou égale à la largeur minimale spécifiée.


if (mql.matches) 
{
  // Window is fine. 
} else 
{
  // Window is too narrow.       
}

Abonnement des écouteurs de requête de média

Pour détecter les modifications de requêtes de média, vous pouvez abonner un écouteur à un objet MediaQueryList. La méthode addListener nécessite une fonction de rappel et l’invoque quand la requête de média change d’évaluation. À partir de la requête de média précédente, l’exemple suivant abonne un écouteur aux modifications dans la requête de média.


mql.addListener(sizeChange); // Size change is the callback function.function sizeChange(mql) 
{
  if (mql.matches) 
  {
    // The window is big enough for content.
  } 
  else 
  {
    // The window has gotten too small for content.
  }
}

L’écouteur invoque la fonction de rappel à chaque fois que l’état du média change. Si la fenêtre est redimensionnée pour être plus étroite que la valeur spécifiée de l’attribut minwidth, la fonction de rappel est invoquée. Elle est de nouveau invoquée quand la fenêtre devient plus large que la valeur spécifiée de l’attribut min-width. L’objet MediaQueryList est transmis en tant que paramètre à la fonction de rappel.

Informations de référence sur les API

Media Queries
Media Query Listeners

Exemples et didacticiels

Concevoir des sites Web adaptatifs

Démonstrations du site Internet Explorer Test Drive

CSS3 Media Queries & Media Query Listeners

Billets IEBlog

Adaptation de votre site à différentes tailles de fenêtre
CSS : Requêtes de média CSS3

Spécification

Requêtes de média
CSSOM View Module: Section 4.1

Rubriques connexes

Répondre à différents appareils avec les requêtes de média CSS3

 

 

Afficher:
© 2014 Microsoft