Informatique


Les Media Queries

Aller à


Généralités

Les Media Queries permettent le Responsive Web Design et recouvrent un ensemble de techniques permettant d'adapter l'affichage/l'impression d'un site Web en fonction des spécificités de l'appareil qui va afficher/imprimer le code html/css.
Cela permet de changer l'apparence du site selon certaines conditions : vous pourrez augmenter la taille du texte, changer la couleur de fond, positionner différemment votre menu dans certaines résolutions, etc.

Une média query est une requête, la réponse à cette requête est toujours soit vraie soit fausse, aucune autre valeur.


Comment appliquer un MQ

Il existe 2 façons d'utiliser les MQ

  • en chargeant une feuille de style .css différente en fonction de la règle (ex : « Si la résolution est inférieure à 800px de large, charge le fichier reso1.css »)
  • en écrivant la règle directement dans le fichier .css habituel (ex : « Si la résolution est inférieure à 800px de large, charge les propriétés CSS ci-dessous »)

Qui dit requête dit opérateurs, ils sont au nombre de quatre:

  • and, le et
  • not, le non
  • only, seulement
  • , (la virgule), le ou


Périphériques (médias) et propriétés

Les périphériques:
Médias
  • all tous les périphériques (valeur par défaut)
  • print les imprimantes
  • screen les écrans (PC, laptop, tablettes, smartphones, tv,...)
  • speech pour les outils de synthèse vocale

  • Les propriétés:

    Valeurs Descriptions
    width Il s'agit de la largeur de la fenêtre au sein de laquelle s'ouvre le document.
    On peut utiliser les préfixes "min-" et "max-"
    Exemple: media="screen and (min-width:500px)"
    Exemple
    Exemple avec un and
    heightIl s'agit de la hauteur de la fenêtre au sein de laquelle s'ouvre le document.
    On peut utiliser les préfixes "min-" et "max-"
    Exemple: media="screen and (min-height:500px)"
    device-widthIl s'agit de la largeur de l'écran (et non la fenêtre!) dans lequel s'ouvre le document.
    On peut utiliser les préfixes "min-" et "max-"
    Exemple: media="screen and (device-width:500px)"
    device-heightIl s'agit de la hauteur de l'écran (et non la fenêtre!) dans lequel s'ouvre le document.
    On peut utiliser les préfixes "min-" et "max-"
    Exemple: media="screen and (device-height:500px)"
    orientationIl s'agit de spécifier comment on veut orienter l'affichage ou l'impression, portrait ou paysage.
    Valeurs possibles: "portrait" ou "landscape".
    Exemple: media="all and (orientation: landscape)"
    Exemple
    etc.Voir MDN.

    Lorsqu'on parle de la largeur ou de la hauteur d'une fenêtre d'affichage ou d'un écran, on parle en fait de la définition, c'est-à-dire du nombre de pixels disponible pour l'affichage.


    Responsive Web Design (RWD)

    Le RWD c'est créé du contenu web destiné à une utilisation optimale quel que soit l'appareil utilisé (GSM, tablettes, liseuses, laptop, PC).

    Le viewport

    Le viewport c'est une affaire pas toujours très claire..., voir le dossier d'alasacréation.

    Dans 99% des cas la ligne suivante suffit pour régler d'éventuels problèmes d'affichage.

    Syntaxe
    		<meta name="viewport" content="width=device-width, initial-scale=1.0">
    	
    Ou du côté CSS:
    Syntaxe
    	/* Voir la compatibilité sur CanIuse*/ 
    	@viewport {
    		width: device-width;
    		zoom: 1; /* zoom initial*/
    	}
    	
    les Media Queries

    On détermine les points de rupture et on associe à chaque rupture une MQ.

    Il s'agit de déterminer une taille particulière à partir de laquelle on bascule sur un autre style d’affichage.
    Avec les largeurs définies ci-dessus, on peut déduire les limites de passage d’un affichage à l'autre, en essayant de ne pas dépasser 3 ou 4 catégories d'affichage.

    Ce sont les valeurs que vous allez utiliser dans les Medias Queries de vos feuilles de style.

    Voici donc les points de rupture souvent utilisés pour un affichage « normal » basé sur 960px de largeur:

    • Jusqu’à 479px : smartphone en portrait
    • De 480px à 959px : smartphone en paysage, tablette en portrait et petite tablette en paysage
    • De 960px à 1280px : tablette en paysage, écran d’ordinateur de taille petite et moyenne
    • 1281px et au delà : grand écran d’ordinateur (21″ et + en plein écran )

    Et dans les cas où votre design initial est basé sur une largeur de 1024px, il suffit de remplacer le point de rupture 960px par 1024px.