90% du trafic sur le web provient du mobile. C’est pourquoi les sites Web conçus doivent avoir une conception réactive adaptée à une utilisation mobile, et la structure de requête multimédia CSS joue un rôle important à cet égard.
La structure de requête multimédia est utilisée pour afficher le contenu sur de grands écrans de manière appropriée sur un petit écran ou pour empêcher le contenu de la page de déborder et de défiler dans différentes tailles d’écran. Lors du codage des sites Web, ils sont optimisés avec des codes CSS réactifs en fonction des différentes tailles d’écran mobile.
Avec la requête multimédia, les codes CSS peuvent être appliqués aux éléments HTML à des largeurs d’écran spécifiques.
Par exemple, alors que les balises <p> font 17 pixels dans une page, la taille de la police de la balise <p> peut être définie sur 14 pixels afin de maintenir le ratio sur les écrans inférieurs à 600 pixels.
Lorsque min-width est utilisé, les codes CSS écrits sous la requête multimédia sont valides pour la valeur de pixel spécifiée.
Comme dans l’exemple ci-dessous, la taille de police de la balise p est spécifiée sur 17 pixels, jusqu’à un maximum de 751 pixels.
@media (min-width: 751px) {
p {
font-size: 17px;
}
}
Lorsque max-width est utilisé, les codes CSS écrits sous la requête multimédia sont valides pour moins que la valeur de pixel spécifiée.
Comme dans l’exemple ci-dessous, la taille de police de la balise p est spécifiée sur 14 pixels, jusqu’à un maximum de 750 pixels.
@media (max-width: 750px) {
p {
font-size: 14px;
}
}
Orientation : En utilisation paysage, les codes CSS écrits sous la requête média sont valides lorsque les appareils mobiles sont placés en position horizontale.
Dans l’exemple ci-dessous, le code CSS qui changera la couleur de la boîte lorsque l’appareil mobile est horizontal est spécifié.
div {
height: 100px;
width: 100px;
background-color: bisque;
}
@media (orientation: landscape) {
div {
background-color: brown;
}
}
Orientation : en mode portrait, les codes CSS écrits sous la requête multimédia sont valides lorsque les appareils mobiles sont en position verticale.
h1 {
font-weight: 100;
}
@media (orientation: portrait) {
h1 {
font-weight: bold;
}
}
Le seul concept utilisé dans la requête média empêche l’exécution de requêtes média non valides dans les anciens navigateurs. Il n’a aucun effet dans les nouveaux navigateurs.
@media only screen and (max-width: 750px) {...}
Pour que la structure de requête multimédia fonctionne, la balise méta de la fenêtre d’affichage doit être ajoutée à la balise <head></head> dans le code source de la page.
<meta name="viewport" content="width=device-width, initial-scale=1">
Source:
https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries