Les Media Queries
Les "Media Queries" (requête média) utilisent la balise CSS @media pour permettre l'adaptation de la mise en page aux différentes tailles d'écran, plus précisément aux différentes largeurs d’écran. Cette règle évalue des conditions liées :
à la nature des média (écran : screen ; impression : printer ; liseuse : speech) ;
à certaines caractéristiques du média (largeur, hauteur, définition...).
1. Exemples
@media screen and (min-width: 780px) and (max-width: 979px){ }
Les éléments de cette règle CSS ne s'appliqueront que pour les affichages sur un écran dont la largeur et comprise entre 780 et 980 pixels.
@media screen and (min-width: 980px){ }
Les éléments de cette règle CSS ne s'appliqueront que pour les affichages sur un écran dont la largeur dépasse 980 pixels.
2. Règles d'application :
Lorsque les conditions relatives à l’appareil sont remplies, les styles de la règle @media sont traités de manière prioritaire et surcharge les propriétés des styles définis globalement. Les styles qui ne figurent pas dans la règle @media mais qui sont définis en dehors, s’appliquent normalement. Les propriétés de styles définies en dehors de la règle et qui ne sont pas redéfinies dans la règle @media s’appliquent normalement.
3. Etude de cas.
L'image ci-dessus montre l'affichage sur 3 écrans de taille différente par la mise en page créée par le code suivant :
Le code HTML
Le code HTML crée un conteneur principal qui contient 3 sous-conteneurs. La classe "main"les affiche les uns en dessous des autres. L'ordre d'affichage par défaut est définit par les classes C1, C2, C3, c'est Bleu-Blanc-Rouge.
Pour les écrans dont la taille dépasse 780 pixels, cet ordre d'affichage est redéfini dans les "média queries" qui modifient la valeur de la propriété "order" des classes C1, C2 et C3.
<html>
<head>
<title>Ecrans</title>
<meta charset="utf-8">
<link rel="stylesheet" href="t.css">
</head>
<body>
<div class="main">
<div class="C1">
bleu
</div>
<div class="C2">
blanc
</div>
<div class="C3">
rouge
</div>
</div>
</body>
</html>
le CSS
la présentation qu'on souhaite avoir sur mobile*/
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.main{
display: flex;
flex-flow: column wrap;
}
.C1{
order: 1;
background-color: blue;
}
.C2{
order: 2;
background-color: white;
}
.C3{
order: 3;
background-color: red;
}
/*
* écrans de taille moyenne
*/
@media screen and (min-width: 780px) and (max-width: 979px){
.C1{
order: 2;
}
.C2{
order: 3;
}
.C3{
order: 1;
}
}
/*
* les grands écrans
*/
@media screen and (min-width: 980px){
.C1{
order: 3;
}
.C2{
order: 2;
}
.C3{
order: 1;
}
}