Créez un site web responsive avec les media queries

Publié le

Besoin d’adapter vos pages web en fonction de la taille de l’écran ? Vous souhaitez utiliser les media queries mais vous ne savez pas comment ? Découvrons ça d’un peu plus prêt !

Qu'est-ce que les media queries ?

Les media queries permettent de cibler des styles spécifiques selon des caractéristiques spécifiques des médias (par exemple, la largeur et la hauteur d'un écran).

Elles permettent aux développeurs de créer des sites web réactifs, ce qui signifie que le contenu est optimisé pour s’adapter à différentes tailles d’écran, et par conséquent à différents appareils.

Afin de maitriser les Media Queries fonctionnent, il est important de comprendre qu'il y a deux aspects à prendre en compte : les styles et les médias.

Les styles peuvent être définis pour différents éléments de votre page web. Vous pouvez définir des styles pour des éléments tels que la police, la couleur, le positionnement et autres.

Ce sont les valeurs que vous ajoutez aux propriétés CSS qui définissent le style de vos éléments.

Vous pouvez également définir des styles pour des éléments spécifiques à chaque média. Les médias sont les types d'appareils qui affichent votre page web. Par exemple, un téléphone, une tablette, un ordinateur de bureau et autres sont des médias spécifiques.

Les media quant-à-eux, définissent la taille de l'écran et le type de support.

Comment utiliser les media queries ?

Les Media Queries peuvent utiliser des valeurs telles que min-width, max-width, min-height, max-height, device-width, device-height, orientation, aspect-ratio, etc.

PAS de panique, c'est relativement simple.. voyons ça ensemble :

Voici un exemple de media queries qui étendent les styles d'un document HTML pour les ordinateurs de bureau et les appareils mobiles :

integrer-media-queries-dans-un-document-css

@media only screen and (min-width: 768px) {
  /* styles pour les ordinateurs de bureau */
}
@media only screen and (max-width: 767px) {
  /* styles pour les appareils mobiles */
}

Ces valeurs peuvent être utilisées pour créer des sites web réactifs qui s'adaptent à différents types de médias et à différentes tailles d'écran.

Les développeurs front-end peuvent utiliser les media-queries afin de créer des styles différents en fonction du type d'appareil ou la taille d'écran.

Spécifier un style entre deux tailles d'écrans

Nous pourrons insérer différentes valeurs aux propriétés CSS, en fonction de la taille du navigateur.

Par exemple, nous pouvons spécifier aux paragraphes une taille de police de 12px quand la largeur est inférieur à 600px.

Tandis que pour les navigateurs de largeur supérieure à 600px, la taille de police sera de 18px...

Voici le résultat en CSS :


@média  (min-width: 600px) {
 p{ font-size: 12px; }
}
@média (max-width: 600px) {
  p{ font-size: 18px; }
}

En utilisant les Media Queries, nous pouvons créer des sites internet personnalisés en fonction de la taille des écrans.

Pour que votre site internet soit adaptatif, veuillez afficher les mêmes informations sur mobile, tablette, ordinateur.. Ne soyez pas tentez de cacher des éléments avec display:none

Les types de media queries

Comme je l'expliquais plus tôt, il est possible d'indiquer plusieurs valeurs dans les media queries. Voici tous les types de media que vous pouvez utiliser :

  • Min-width : Largeur minimale
  • Max-width : Largeur maximale
  • Min-height : Hauteur minimale
  • Max-height : Hauteur maximale
  • Device-width : Largeur d'un appareil
  • Device-height : Hauteur d'un appareil
  • Orientation : Orientation de l'appareil
  • Aspect-ratio : C'est une valeur de media queries qui permet de définir un rapport entre la largeur et la hauteur d'une fenêtre d'affichage d'un appareil.