CSS Média Query - Exemples
- Page précédente Requêtes de média CSS
- Page suivante Introduction au RWD
CSS Média Query - Plus d'exemples
Voyons quelques exemples supplémentaires d'utilisation des requêtes média.
La requête média est une technique populaire pour transmettre des feuilles de style personnalisées à différents appareils.
Voici un exemple simple pour illustrer comment modifier la couleur de fond des appareils différents :
Exemple
/* Configurez la couleur de fond du body en brun jaunâtre */
body {
background-color: tan;
}
/* Sur les écrans de 992 pixels ou moins, configurez la couleur de fond en bleu */
@media screen and (max-width: 992px) {
body {
background-color: blue;
}
}
/* Sur les écrans de 600 pixels ou moins, configurez la couleur de fond en vert olivâtre */
@media screen and (max-width: 600px) {
body {
background-color: olive;
}
}
Vous voulez savoir pourquoi nous utilisons précisément 992px et 600px ? Ce sont ce que nous appelons les "points de rupture typiques" des appareils. Vous pouvez les trouver sur notre Tutoriel de conception web responsive Apprendre davantage sur les points de rupture typiques en chinois.
Requêtes média du menu
Dans cet exemple, nous utilisons des requêtes média pour créer un menu de navigation réactif, qui change selon les tailles d'écran différentes.
Exemple
/* Conteneur navbar */
.topnav {
overflow: hidden;
background-color: #333;
}
/* Liens du navbar */
.topnav a {
float: left;
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* Sur des écrans de largeur de 600 pixels ou moins, empiler les liens de menu plutôt que de les aligner côte à côte */
@media screen and (max-width: 600px) {
.topnav a {
float: none;
width: 100%;
}
}
Requêtes média des colonnes
Une utilisation courante des requêtes média consiste à créer des mises en page flexibles. Dans cet exemple, nous avons créé une mise en page qui change entre quatre colonnes, deux colonnes et des colonnes pleine largeur, en fonction de différentes tailles d'écran :
Écran de grande taille :
Écran de taille moyenne :
Écran de petite taille :
Exemple
/* Créer quatre colonnes flottantes adjacentes égales */
.column {
float: left;
width: 25%;
}
/* Sur des écrans de 992px ou plus petits, passer de quatre colonnes à deux colonnes */
@media screen and (max-width: 992px) {
.column {
width: 50%;
}
}
/* Sur les écrans de largeur inférieure ou égale à 600 pixels, empiler les colonnes plutôt que de les aligner côte à côte */
@media screen and (max-width: 600px) {
.column {
width: 100%;
}
}
Astuce :une méthode plus moderne de création de mise en page des colonnes en utilisant CSS Flexbox (voir les exemples ci-dessous). Cependant, Internet Explorer 10 et les versions antérieures ne le prennent pas en charge. Si vous avez besoin de la prise en charge de IE6-10, utilisez les floats (comme montré ci-dessus).
Pour en apprendre davantage sur le module de mise en page flexible, veuillez étudier Flexbox CSS ce chapitre.
Pour en apprendre davantage sur le design web réactif, veuillez étudier notre Tutoriel de conception web responsive.
Exemple
/* Conteneur de boîte flexible */
.row {
display: flex;
flex-wrap: wrap;
}
/* Créer quatre colonnes égales */
.column {
flex: 25%;
padding: 20px;
}
/* Sur des écrans de 992px ou plus petits, passer de quatre colonnes à deux colonnes */
@media screen and (max-width: 992px) {
.column {
flex: 50%;
}
}
/* Sur les écrans de largeur inférieure ou égale à 600 pixels, empiler les colonnes plutôt que de les aligner côte à côte */
@media screen and (max-width: 600px) {
.row {
flex-direction: column;
}
}
Cacher des éléments avec une requête média
Une autre utilisation courante de la requête média consiste à cacher des éléments sur différents tailles d'écran :
Je le cache sur les petits écrans.
Exemple
/* Si la taille de l'écran est de 600 pixels ou moins, masquer cet élément */
@media screen and (max-width: 600px) {
div.example {
display: none;
}
}
Modifier la taille de la police avec une requête médiatique
Vous pouvez également utiliser les requêtes médiatiques pour modifier la taille de la police des éléments sur différentes tailles d'écran :
Taille de police variable.
Exemple
/* Si la taille de l'écran dépasse 600 pixels, définir la taille de la police de l'élément <div> sur 80 pixels */
@media screen and (min-width: 600px) {
div.example {
font-size: 80px;
}
}
/* Si la taille de l'écran est de 600 pixels ou moins, définir la taille de la police de l'élément <div> sur 30 pixels */
@media screen and (max-width: 600px) {
div.example {
font-size: 30px;
}
}
Bibliothèque d'images flexible
Dans cet exemple, nous utilisons la requête médiatique avec flexbox pour créer une bibliothèque d'images responsive :
Exemple
Site web flexible
Dans cet exemple, nous utilisons la requête médiatique avec flexbox pour créer un site web responsive, comprenant une barre de navigation flexible et un contenu flexible.
Exemple
Orientation : portrait / paysage
Les requêtes médiatiques peuvent également être utilisées pour modifier la mise en page de la page en fonction de l'orientation du navigateur.
Vous pouvez définir un ensemble d'attributs CSS qui ne s'appliquent qu'au moment où la largeur de la fenêtre du navigateur est supérieure à sa hauteur, c'est ce que l'on appelle l'écran paysage :
Exemple
Si l'orientation est en mode portrait, utilisez le fond de couleur bleu clair :
@media only screen and (orientation: landscape) {
body {
background-color: lightblue;
}
}
Largeur minimale à maximale
Vous pouvez également utiliser les attributs max-width et min-width pour définir la largeur minimale et maximale.
Par exemple, lorsque la largeur du navigateur est comprise entre 600 et 900 pixels, modifier l'apparence de l'élément <div> :
Exemple
@media screen and (max-width: 900px) and (min-width: 600px) {
div.example {
font-size: 50px;
padding: 50px;
border: 8px solid black;
background: yellow;
}
}
Utilisation de la valeur ajoutée : dans l'exemple suivant, nous utilisons la virgule (similaire à l'opérateur OR) pour ajouter des requêtes médiatiques supplémentaires aux requêtes médiatiques existantes :
Exemple
/* Lorsque la largeur est comprise entre 600 pixels et 900 pixels ou supérieure à 1100 pixels - modifier l'apparence de <div> */
@media screen and (max-width: 900px) and (min-width: 600px), (min-width: 1100px) {
div.example {
font-size: 50px;
padding: 50px;
border: 8px solid black;
background: yellow;
}
}
Référentiel @media CSS
Pour un aperçu complet de tous les types de média et des caractéristiques / expressions, voir Règle @media dans la référence CSS.
Astuce :Pour en savoir plus sur la conception web responsive (comment s'adapter à différents appareils et écrans) et sur l'utilisation des points de rupture des requêtes media, lisez notre Tutoriel de conception web responsive.
- Page précédente Requêtes de média CSS
- Page suivante Introduction au RWD
