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.
Air Jordan 1 Blue Chill Womens CD0461 401 Release Date 4 | Women's Nike Air Force 1 Shadow trainers - Latest Releases - Ietp , nike tiempo leather turf 2010
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.
