Conception Web Responsive - Media Queries
Media Queries CSS
Les media queries CSS permettent d'appliquer des styles en fonction des caractéristiques d'un appareil ou de l'environnement affichant la page web.
Elles sont essentielles pour créer des pages web responsives.
La règle CSS @media est utilisée pour ajouter des media queries à votre feuille de style.
Utiliser des Media Queries pour Ajouter un Point de Rupture
Sur la page précédente, nous avons créé une page web avec une mise en page en grille. Maintenant, nous souhaitons ajouter un point de rupture avec des media queries pour réorganiser les éléments de la grille sur des écrans plus grands.
Téléphone mobile
Bureau
Exemple
Ici, nous utilisons une media query pour ajouter un point de rupture à 600px :
@media (min-width: 600px) {
.header {grid-area: 1 / span 6;}
.menu {grid-area: 2 / span 1;}
.content {grid-area: 2 / span 4;}
.facts {grid-area: 2 / span 1;}
.footer {grid-area: 3 / span 6;}
}
Un Autre Point de Rupture
Vous pouvez ajouter autant de points de rupture que vous le souhaitez.
Bureau
Tablette
Téléphone
Exemple
Ici, nous utilisons des media queries pour ajouter des points de rupture lorsque l'écran fait au moins 600px et lorsque l'écran fait au moins 768px :
@media (min-width: 600px) {
.header {grid-area: 1 / span 6;}
.menu {grid-area: 2 / span 1;}
.content {grid-area: 2 / span 4;}
.facts {grid-area: 3 / span 6;}
.footer {grid-area: 4 / span 6;}
}
@media (min-width: 768px) {
.header {grid-area: 1 / span 6;}
.menu {grid-area: 2 / span 1;}
.content {grid-area: 2 / span 4;}
.facts {grid-area: 2 / span 1;}
.footer {grid-area: 3 / span 6;}
}
Points de Rupture Typiques des Appareils
Il existe de nombreux écrans et appareils avec différentes hauteurs et largeurs, il est donc difficile de créer un point de rupture exact pour chaque appareil. Pour simplifier les choses, vous pourriez cibler cinq groupes :
Exemple
/* Appareils très petits (téléphones, 600px et moins) */
@media only screen and (max-width: 600px) {...}
/* Appareils petits (tablettes en portrait et grands téléphones, 600px et plus) */
@media only screen and (min-width: 600px) {...}
/* Appareils moyens (tablettes en paysage, 768px et plus) */
@media only screen and (min-width: 768px) {...}
/* Appareils grands (ordinateurs portables/bureaux, 992px et plus) */
@media only screen and (min-width: 992px) {...}
/* Appareils très grands (grands ordinateurs portables et bureaux, 1200px et plus) */
@media only screen and (min-width: 1200px) {...} Media Queries pour l'Orientation de l'Écran
Les media queries peuvent également être utilisées pour changer la mise en page d'une page en fonction de l'orientation de l'écran.
Ici, nous changeons la couleur de fond du corps si l'orientation de l'écran est en mode paysage :
Exemple
@media only screen and (orientation: landscape) {
body {
background-color: lightblue;
}
} Cacher des Éléments avec des Media Queries
Ici, nous utilisons des media queries pour cacher un élément sur de petits écrans :
Exemple
/* Cacher l'élément si la largeur de la fenêtre d'affichage est de 600px ou moins */
@media screen and (max-width: 600px) {
#div1 {
display: none;
}
}
Changer la Taille de la Police avec des Media Queries
Ici, nous utilisons des media queries pour changer la taille de la police d'un élément selon les différentes largeurs de la fenêtre d'affichage :
Exemple
/* Si la largeur de la fenêtre d'affichage est de 600px ou plus, définir la taille de la police à 80px */
@media screen and (min-width: 600px) {
#div1 {
font-size: 80px;
}
}
Media Queries pour les Préférences Utilisateur
Certains utilisateurs ont une sensibilité au mouvement et préfèrent les sites web avec moins d'animations.
La fonctionnalité média prefers-reduced-motion vous permet de vérifier si un utilisateur a demandé à réduire le mouvement, comme les animations ou les transitions. Utilisez cette fonctionnalité pour désactiver les animations et les transitions pour les utilisateurs qui ont activé ce paramètre sur leur ordinateur :
Exemple
@media (prefers-reduced-motion: reduce) {
* {
animation: none !important;
transition: none !important;
}
} Référence CSS @media
Pour un aperçu complet de tous les types de médias et des fonctionnalités/expressions, veuillez consulter la règle @media dans notre référence CSS .