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


Les périphériques et leurs valeurs

Ces périphériques et valeurs sont nombreux (cliquer ici pour le détail), nous décrivons les plus utilisées ci-aprè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)"
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)"

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.


Médias
  • all tous les périphériques (valeur par défaut)
  • print les imprimantes
  • screen les écrans; PC, laptop, tablettes, smartphones
  • handheld les périphériques mobiles (tablettes, smartphone), malheureusement encore mal implémenté au moment uù j'écris ces lignes (2016)
  • tv les télévisions
  • projection les projecteurs

  • Exemples

    Tous les exemples qui suivent peuvent être tester en local avec la console de votre navigateur (Chrome dans mon cas).

    Exemple 1

    Lorsque la fenêtre d'affichage fait maximum 960px on met un fond rouge et des caractères blancs pour la classe .cit, si non le fond est blanc et les caractères noirs.

    Démo
    	<style>
    	@media screen and (max-width: 960px)	{
    		body{
    		background:red;
    		}
    		.cit	{
    		color:white;
    		}
    		}
    		.cit	{
    		font-weight:bolder;
    		}
    	</style>
    	</head>
    	<body>
    		<p class=cit>On fait la guerre quand on veut, on la termine quand on peut. (Nicolas Machiavel)</p>
    	</body>
    
    Exemple 2

    Lorsque la fenêtre d'affichage fait minimum 480px et au maximum 800px on met un fond rouge et des caractères blancs pour la classe .cit, si non le fond est blanc et les caractères noirs.

    Démo
    	<style>
    	@media screen and (min-width:480px) and (max-width: 960px)	{
    		body{
    		background:red;
    		}
    		.cit	{
    		color:white;
    		}
    	}
    	.cit	{
    	font-weight:bolder;
    	}
    	</style>
    	</head>
    	<body>
    		<p class=cit>On fait la guerre quand on veut, on la termine quand on peut. (Nicolas Machiavel)</p>
    	</body>
    
    Exemple 3

    Lorsque la fenêtre d'affichage est en orientation portrait on met un fond rouge et des caractères blancs pour la classe .cit, si non le fond est blanc et les caractères noirs.

    Démo
    	<style>
    	@media screen and (orientation:portrait)	{
    		body{
    		background:red;
    		}
    		.cit	{
    		color:white;
    		}
    	}
    	.cit	{
    	font-weight:bolder;
    	}
    
    	</style>
    	</head>
    	<body>
    		<p class=cit>On fait la guerre quand on veut, on la termine quand on peut. (Nicolas Machiavel)</p>
    	</body>