28/11/2021

CSS Media Query & Conception réactive

Media Queries

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.

Min-width Media Query

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;
   }
}

Max-width Media Query

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: Landscape

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é.

Media Query Orientation Landscape

Vertical

Media Query Orientation Landscape

Horizontal

div {
    height: 100px;
    width: 100px;
    background-color: bisque;
}
@media (orientation: landscape) {
    div {
        background-color: brown;
    }
}

Orientation: Portrait

Orientation : en mode portrait, les codes CSS écrits sous la requête multimédia sont valides lorsque les appareils mobiles sont en position verticale.

Media Query Orientation Portrait

Vertical

Media Query Orientation Portrait

Horizontal

h1 {
   font-weight: 100;
}

@media (orientation: portrait) {
   h1 { 
      font-weight: bold; 
   } 
}

Compatibilité des anciens navigateurs

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) {...}

Media Query & Viewport

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