Les media queries : adaptation du CSS selon le média utilisé

Désormais, vous êtes capable de réaliser un site web. Nous avons toujours travaillé sur un PC. Mais qu’en est-il de la présentation de son site sur un appareil mobile ? Et sous forme imprimer ?

Pas d’inquiétude ! Il est temps de se charger de ce dernier détail, en se servant des « media queries » de la norme CSS3 !

Fonctionnement

Notre feuille CSS ressemble actuellement à ceci, si l’on synthétise :

element1{
    propriété1: valeur;
}

// […]

elementX{
    propriétéX: valeur;
}

// FIN

Cette feuille présente les propriétés de base. Elles s’appliqueront toujours, quel que soit le support utilisé.
Une media queries permet de rajouter ou d’écraser des propriétés sous certaines conditions (taille de l’écran, média utiliser…). En somme, c’est comme une condition « if », pour faire l’analogie avec la programmation.

Voici maintenant un nouveau code :

element1{
    propriété1: valeur1;
}

// […]

elementX{
    propriétéX: valeur;
}

@media screen and (max-width : 700px) {

    element1 {
        propriété1: valeur2
    }

} // fin de la media queries : taille d’écran inférieur à 700 px

// FIN

Ici :

• « @media » indique que nous allons réaliser une media querie. Nous mettrons à la suite la condition qui indiquera quand elle doit être appliquée.
• « screen » indique un média, ici « l’écran ». La media querie va donc s’appliquer si nous sommes sur un écran.
• « and » fait le lien entre deux conditions, et elles doivent être respectées toutes les deux (comme le && dans certains langages).
• max-width: 700px. Dois-je vraiment l’expliquer ? Nous avons déjà vu cette propriété : largeur maximale de 700 !

Vous devez maintenant comprendre la signification de la condition : écran dont la largeur est de 700 pixels au maximum. À cette condition, on appliquera à l’element1 la valeur2 sur sa propriété propriété1, à la place de valeur1.

Vous pouvez mettre plusieurs media queries, en gardant à l’esprit que les propriétés les plus basses dans la feuille écraserons celles du dessus.

Liste des médias et des conditions les plus courantes

Les médias :

• all : tous les appareils
• print : lors de l’impression sous forme papier
• screen : les écrans

Les caractéristiques média :

• width/max width : largeur de l’écran
• height/max height : hauteur de l’écran
• resolution : densité de pixel de l’écran

Les opérateurs logiques :

• and : ET logique (expliquer plus haut)
• « , » : OU logique

Une liste plus exhaustive se trouve ici.

Mise en pratique !

Vous avez réalisé un CV en ligne lors du TP précédent. Très bien. Vous savez ce qu’il vous reste à faire ? L’adapter pour les appareils mobiles !

Rajoutez des media queries afin de prendre en charge des écrans plus petits. N’hésitez pas à en faire plusieurs afin d’avoir le style le plus adaptatif possible.

Renseignez-vous sur les largeurs des différents appareils.

Des exemples :

• 1920px : écran full HD
• 1366px : écran standard d’un ordinateur portable
• 800px : plus petit écran possible pour ordinateur
• 320px : largeur d’un iPhone 5S