Responsive design : les media queries CSS 3 à l'honneur Media queries CSS 3 : gérer les conditions
Lorsque plusieurs conditions sont utilisées, elles peuvent être groupées à l'intérieur de parenthèses et reliées entre elles par des opérateurs logiques :
and pour le "et", lorsque les deux conditions sont nécessaires ;
une virgule (,) pour le "ou", si au moins une des conditions est requise ;
le mot not pour le « non », de façon à obtenir le contraire de la condition initiale (ce not étant à placer avant la parenthèse de la condition).
Dans l'exemple suivant, extrait d'une feuille de style, les images sont désactivées sur les écrans dont la taille n'est pas au minimum de 320 pixels :
@media only screen and not (min-device-width: 320px)
{
img { display: none; }
}
Notons que la première condition est only screen au lieu de screen, de façon à ce que ce code soit interprété seulement par les navigateurs qui connaissent ce mot-clé only, donc qui sont au fait des normes CSS 3. Ceux des navigateurs qui ne sont comprennent que la norme CSS 2, dont fait partie le mot-clé screen utilisé seul, ne prendront pas en compte cette consigne, ce qui évite tout risque de mauvaise interprétation.
Vous retrouverez tous les détails des media queries sur le site du W3C, à
cette adresse.
Attention
Les mobiles simulent des largeurs d'écran fictives ! Sur un smartphone, le test de la largeur de fenêtre avec width ou min-width peut ne pas fonctionner. En effet, le navigateur mobile donne souvent des valeurs bien supérieures à celles de l'appareil, lorsqu'il fournit le viewport, c'est-à-dire les dimensions de la fenêtre. La largeur indiquée peut être de 800 à 1 000 pixels, alors qu'elle est en réalité de 300 à 600 pixels.
Ayant récupéré la page web à cette dimension fictive, le navigateur réduit le contenu obtenu avant de l'afficher. Il est donc plus prudent d'utiliser le test mindevice-width (largeur réelle de l'appareil) plutôt que min-width qui peut être erroné.
Cependant, les informations fournies par l'appareil sur ses dimensions réelles ne sont pas toujours très fiables. Par conséquent, il sera toujours utile d'effectuer des tests avec différentes configurations pour vérifier la prise en compte de nos sélections par media queries.
Une solution, sous réserve de son interprétation par les mobiles, consiste à régler le zoom à 1 et d'étendre la largeur de la fenêtre à la dimension obtenue. C'est la page HTML qui effectuera cette demande, par l'insertion dans son en-tête (entre les balises <head> et </head>) de la balise <meta> suivante :
<meta name="viewport" content="initial-scale=1.0">