Introduction au Responsive Design : les media queries

16Sep

Introduction au Responsive Design : les media queries

L'adaptation des sites web à tous les supports repose en particulier sur une spécification CSS3 simple à appréhender et à mettre en place : les media-queries.

L'intérêt est de permettre un affichage adapté en fonction d'éléments renvoyés par le navigateur.

 

Le principe

On utilise la spécification CSS 3 media-queries pour charger dynamiquement les feuilles de style (css) en fonction du support :

type de support (tous types (all), écrans d'ordinateur (screen), d'appareil mobile (handheld), écrans de télévision (tv), projecteurs (projection), lunettes 3D (3d-glasses) Impression (print)...)
taille de l'écran (device-width, device-height)
taille de la zone d'affichage, ou taille de la fenêtre redimensionnée (width, height)
orientation (portrait ou landscape (paysage))
résolution (utilisé pour l'impression, par exemple : min-resolution: 300dpi)
...etc

 

La syntaxe

La syntaxe est très simple et intuitive, avec des paramètres qui indiquent les critères à prendre en compte, 3 opérateurs logiques - and (et), only (seulement) et not (non), et les valeurs qui sont généralement fixées en pixels ou en em (ou pour d'autres supports en dpi - points par pouce - ou dpcm - points par centimètre).

 

Voici quelques exemples courants de syntaxe :

@media only screen and (min-width: 800px) and (max-width: 1169px) {
.instructions { }
}
@media only screen and (max-width: 799px){
.instructions2 { }
}

Avec ces 2 commandes, on couvre l'ensemble de la taille des écrans d'ordinateur (media only screen) :

Pour les résolutions supérieures ou égales à 1170 pixels, aucune règle particulière n'est appliquée.

Pour les résolutions inférieures à 1170 pixels ET supérieures ou égales à 800 pixels, on applique la classe "instructions"

Pour les résolutions inférieures à 800 pixels, on applique la classe "instructions2".

 

De la même façon, il est possible de charger une feuille de style complète plutôt qu'une simple classe :

<link rel="stylesheet" media="(max-width: 799px)" href="fichier.css" />

 

La compatibilité

les media-queries sont compatibles avec tous les navigateurs modernes, et avec Internet Explorer depuis la version 9. Des problèmes se posent donc sur IE jusqu'à la version 8, pour lequel il faut appliquer une "rustine" (fallback) comme Modernizr pour s'assurer d'un fonctionnement correct.

Vous pouvez tester l'application de ces comportements sur ce site, en redimensionnant la fenêtre de votre navigateur, avec par exemple le menu de droite (catégories de blog) qui vient se positionner sous les contenus à partir d'une largeur déterminée, pour faciliter la lecture sur tous supports.

 

Coordonnées

A propos

Conception de sites internet professionnels

21 ans d'expérience :

- Chef de projet Web pendant 5 ans

- Puis Indépendant depuis 16 ans.


En savoir plus  

Newsletter

Inscrivez vous à ma lettre d'informations pour vous tenir au courant des infos récentes (mises à jour CMS, nouvelles références, opérations spéciales...)