Media Queries
Les "Media Queries" utilisent sur la règle CSS @media pour permettre l'adaptation de la mise en page 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 règles CSS placées dans cette condition 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 règles CSS placées dans cette condition ne s'appliqueront que pour les affichages sur un écran dont la largeur dépasse 980 pixels.
2. Règles d'application :
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 si les conditions relatives à l’appareil sont remplies. Les styles qui ne figurent pas dans la règle @media mais qui sont définis en dehors, s’applique normalement. Les propriétés de styles qui ne sont pas redéfinies dans la règle @media mais qui sont définis en dehors, s’applique normalement.
3. Etude de cas.
L'image ci-dessous montre la mise en page produite sur 3écrans de taille différente par le code suivant :
le code html
<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 code HTML crée un conteneur principal qui contient 3 sous-conteneurs qui, à cause de la classe "main"sont affichés les uns en dessous des autres. Par défaut, l'ordre d'affichage est Bleu-Blanc-Rouge par les classes C1, C2, C3.
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 des classes C1, C2 et C3.
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;
}
}