Qu’est-ce que les média queries ?
Les média queries sont utilisés pour changer les propriétés css des blocks en fonction de la largeur de l’écran (disposition verticale au lieu d’horizontale, cacher des éléments, changer la taille des polices, etc).
A ne pas confondre avec le responsive qui se contente d’adapter les dimensions des blocs en fonction de la largeur d’écran.
Les deux sont liés étroitement, mais ce n’est pas la même chose.
@media est la règle à utiliser lorsqu’on veut utiliser les media queries.
elle va définir le type média sur lequel les modifications css vont s’appliquer.
Dans l’exemple ci-dessous tout comme dans la majorité des cas, le type de média sera screen (écran).
@media screen
Avec @media screen, il faut préciser une taille ou un intervalle de tailles d’écran au sein duquel les propriétés vont s’appliquer.
example:
@media screen and (max-width: 700px)
Première étape : construire un site flexible (responsive) :
Nous allons faire une mise en page avec :
- Un bandeau.
- Un Header (en-tête).
- Une Barre de navigation.
- Une grille flexible avec deux colonnes de différente tailles (30 et 70%).
- Les deux colonnes contiendront des titres, des paragraphes et des images (les images seront fausses et seront remplacées par une couleur de fond (background-color), des largeurs prédéfinies (width) et des marges intérieures (padding).
- Un footer (pied de page).
HTML
CSS
/* On applique la règle border-box à tous les éléments */
* {
box-sizing: border-box;
}
/* On enlève les marges par défaut et on définit la police du texte */
body {
font-family: Arial;
margin: 0;
}
/* Header/logo Titre */
.header {
padding: 60px;
text-align: center;
background: #1abc9c;
color: white;
}
/* on met en forme la barre de navigation */
.navbar {
display: flex;
background-color: #333;
}
/* on met un style aux liens de navigation */
.navbar a {
color: white;
padding: 14px 20px;
text-decoration: none;
text-align: center;
}
/* On change la couleur des liens de navigation au passage de la souris*/
.navbar a:hover {
background-color: #ddd;
color: black;
}
/* On crée un conteneur flexible qui contiendra les colonnes */
.conteneur {
display: flex;
flex-wrap: wrap;
}
/* On crée deux colonnes : une pour barre latérale et une pour la section principale*/
.aside {
flex: 30%;
background-color: #f1f1f1;
padding: 20px;
}
/* Main column */
.principal {
flex: 70%;
background-color: white;
padding: 20px;
}
/* on crée des emplacements pour les images*/
.img {
background-color: #aaa;
width: 100%;
padding: 20px;
height: 200px;
}
.img2 {
background-color: #aaa;
width: 100%;
padding: 20px;
height: 60px;
}
h4{
background-color: black;
color: white;
text-align: center;
}
/* Footer */
.footer {
padding: 20px;
text-align: center;
background: #ddd;
}
Deuxième étape : mettre en place dans le fichier css les média queries :
/*On change la mise en page lorsque la largeur d’écran passe en dessous de 701px*/
/*Les deux colonnes vont se positionner les unes en-dessous des autres au lieu de se placer côte-à-côte*/
@media screen and (max-width: 700px) {
.conteneur, .navbar {
flex-direction: column;
}
}
Résultat au-dessus de 700px :
Résultat en-dessous de 701px :
Prenons un autre exemple en appliquant des média queries pour deux largeurs d’écran différentes.
On va créer 4 colonnes flexibles qui vont s’afficher de la façon suivante :
- Par défaut : 4 colonnes côte-à-côte.
- A partir de 992px ou moins : 2 colonnes côte-à-côte.
- A partir de 600px ou moins : 4 colonnes les unes en-dessous des autres.
* {
box-sizing: border-box;
}
/* Conteneur flexible*/
.conteneur {
display: flex;
flex-wrap: wrap;
}
/* 4 colonnes de largeur égale 25% */
.colonne {
flex: 25%;
padding: 20px;
color: white;
}
/*Sur les écrans de 992px ou moins on passe de 4 à 2 colonnes par ligne*/
@media screen and (max-width: 992px) {
.colonne {
flex: 50%;
}
}
/*Sur les écrans de 600px ou moins les colonnes se rangent verticalement*/
@media screen and (max-width: 600px) {
.conteneur {
flex-direction: column;
}
}
993px et plus :
992px et moins :
600px et moins :
Cacher des éléments avec Media Queries :
Nous allons cacher un élément à partir de 600px ou moins.
div.cacher {
background-color: yellow;
padding: 20px;
font-size: 18px;
}
@media screen and (max-width: 600px) {
div.cacher {
display: none;
}
}
Au-dessus de 600px :
A partir de 600px :
Utiliser max-width et min-width conjointement :
/* si la taille de l’écran fait 601px de large ou plus, mets le font-size du div a 20px */
@media screen and (min-width: 601px) {
div.cacher {
font-size: 20px;
}
}
/* si la taille de l’écran fait 600px ou moins de large, mets le font-size du div a 15px */
@media screen and (max-width: 600px) {
div.cacher {
font-size: 15px;
}
}
C’est un superbe travail que vous avez fait la route est parfaitement expliqué et illustré. Le flex grace à vous n’est plus une énigme à résoudre.
Je vous souhaite un bon courage pour la suite de vos informations.
Amicalement.
Xavier
Merci Xavier.
Merci.
Très bonnes explication et illustration
Excellent!
Merci pour ce magnifique cours.