01

Media queries

Les media queries sont un ensemble de directives permettant aux auteurs de feuilles de styles de réserver la mise en forme CSS à certains médias ou périphériques selon leurs caractéristiques.

Ces caractéristiques peuvent être liées au support : screen, print, handheld (périphériques mobiles ; très mal supportée par les navigateurs mobiles), tv, etc.

Elles sont un élément fondamental du Responsive web design.

01

CSS2

Ci-dessous, un attribut media est associé au lien d’importation des feuilles de styles pour déterminer le type de média auquel doit s’appliquer l’ensemble des règles écrites dans les fichiers screen.css et print.css.

Cette approche est autorisée depuis la version 2 de la spécification CSS. Elle est aujourd’hui moins utile, remplacée et augmentée par la version 3 du langage CSS.

<!doctype html>
<html>            
    <head>
        <meta charset="utf-8">
        <title>Media Queries !</title>
        <link rel="stylesheet" media="screen" href="screen.css" type="text/css" />
        <link rel="stylesheet" media="print" href="print.css" type="text/css" />
    </head>
    <body>
    ...
    </body>
</html>
                
            

02

CSS3

En CSS3, plusieurs critères peuvent être combinés pour déterminer la cible des règles. Ainsi, dans l’exemple ci-dessous, seuls les navigateurs écran dont la taille est au minimum de 200px et au maximum de 640px verront leur arrière-plan coloré en rouge.

@media screen and (min-width: 200px) and (max-width: 640px) {
    body {
        backlground:red;        
    }
}
                
            

03

Orientation et résolution

Les media queries peuvent également déterminer des règles en fonction de l’orientation du périphérique – en mode portrait ou paysage :

@media screen and (orientation:portrait) {
    body {
        background:red;        
    }
}
@media screen and (orientation:landscape) {
    body {
        background:blue;        
    }
}
                
            

Les media queries permettent de réserver des règles aux périphériques en fonction de leur résolution / densité de pixels :

@media 
(-webkit-min-device-pixel-ratio: 2), 
(min-resolution: 192dpi) { 
    /* Retina-specific stuff here */
}
                
            

04

Usage

Les media queries permettent d’adapter les règles d’affichage en fonction du périphérique.

On utilisera fréquemment ces adaptations pour :

Mobile first

Plusieurs stratégies peuvent être employées dans les logiques de mise en œuvre du responsive web design.

Il est possible de concevoir en priorité son interface pour le support disposant de la moindre taille d’écran (mobile first). Dans ce cas, les premières règles seront dédiées aux affichages restreints, et augmentées progressivement en utilisant les attributs min-width des media queries :

Ci-dessous, la taille par défaut est de 18px – pour les mobiles, donc. Elle ne deviendra de 21px que pour des écrans plus larges que 640px.

body{
    font-size: 18px;
}

@media (min-width:640px) {
    body {
         font-size: 21px;                    
    }
}
            

Desktop first

À l’inverse, on peut spécifier un ensemble de règles standards pour les interfaces de type “ordinateur de bureau”, et ajuster ces règles au fur et à mesure de la diminution de la taille d’écran.

Ci-dessous, un élément servant d’ornement pourra être affiché sur les grands écrans, et disparaitre sur les interfaces mobiles.

.ornement{
    height:600px;
}

@media (max-width:640px) {
    .ornement {
         display:none
    }
}
            

05

Aller plus loin

Un exemple de mise en page avec navigation responsive sur ateliers.esapyrenees.fr/web

Les media queries permettent d’adapter les règles d’affichage en fonction du périphérique.