17 Media queries

Dans le précédent TP nous avons créé un template basique mais fonctionnel d'un site web d'actualité. Dans ce tp nous allons devoir adapter notre site à différents terminaux. Nous allons donc transformer notre template en template responsive.

Comment tester notre site sur différents terminaux.

Il est compliqué de tester notre site sur différents terminaux, notamment lorsque celui-ci est en développement. Fort heureusement les navigateurs nous proposent un outil au sein de l'inspecteur permettant de tester cela:

Grâce à cette fonctionnalité nous pouvons tester notre site web en mode responsive.

Transformer notre template pour du responsive.

Nous avons créé un template qui s'affiche parfaitement sur grand écran (supérieur à 960px). Il convient de modifier notre CSS pour le faire s'afficher convenablement sur des écrans plus petits.

Media queries

Les requêtes média (media queries) permettent de modifier l'apparence d'un site ou d'une application en fonction du type d'appareil (impression ou écran par exemple) et de ses caractéristiques (la résolution d'écran ou la largeur de la zone d'affichage (viewport) par exemple).

Les requêtes média sont utilisées afin :

• D'appliquer certains styles de façon conditionnelle grâce aux règles @media et @import.
• De cibler certains média pour les éléments <style>, <link>, <source> et d'autres éléments HTML grâce à l'attribut media=.

Premier exemple

Ajoutez ce code CSS à la fin de votre fichier de style

@media screen and (max-width: 600px) {
    body {
        color: red;
    }
}

En utilisant l'outil présenté ci-dessus, modifier le viewport (la taille de l'écran) pour voir la modification de la media queries s'appliquer.

À vous de jouer

En reprenant le template du TP précédent, modifier votre style css pour rendre votre site responsive. Voici quelques pistes qui peuvent vous aider:

• La grille passe de plusieurs colonnes à une seule ou les éléments sont placés les uns en dessous des autres,
• Le menu place ses éléments également les uns en dessous des autres et les centres la plupart du temps.