Introduction

Les média queries permettent d'appliquer des règles en fonction du support de sortie (Ecran, imprimante...) et de ses particularités (largeur, hauteur, couleur...).

Pour simuler l'affichage d'un smartphone sur vos navigateurs tapez Ctrl-Shift-M sur FireFox , Ctrl-Shift-I sur Chrome ou cliquez sur le logo Zonedans le débogueur.

Attention, pour des raisons de différences entre les surfaces physiques et les surfaces utilisables, il nous faut ajouter dans notre HTML une balise meta

1
<meta name="viewport" content="width=device-width, initial-scale=1.0">

Cette balise pourra être remplacée (quand tous les navigateurs seront compatibles) par la règle CSS suivante :

1
@viewport {
2
   width: device-width;
3
   zoom: 1;
4
}

Pour plus d'informations voir sur alsacréation