Skip to main content

Les Media Queries

Choisissez votre classe

Introduction au Responsive Design​

Le Responsive Design est une approche de conception web qui permet à une page web de s’adapter et de se redimensionner automatiquement en fonction de la taille et du type d’écran de l’utilisateur. Cela assure une expérience utilisateur optimale, peu importe l’appareil utilisé.

Pourquoi le Responsive Design est-il important ?

  • Optimisation Mobile : De plus en plus d’utilisateurs accèdent aux sites web depuis des appareils mobiles. Le responsive design garantit que les pages web s’affichent correctement sur des écrans de toutes tailles.
  • SEO : Les moteurs de recherche, comme Google, favorisent les sites adaptés aux mobiles dans leurs classements.
  • Accessibilité : Une conception responsive permet à tous les utilisateurs d’accéder facilement au contenu, quel que soit leur appareil.

La Fluidité des Grilles​

Utiliser une grille fluide permet de faire varier la taille des éléments en fonction de la taille de la fenêtre du navigateur. Au lieu de définir des largeurs en pixels, il est préférable d’utiliser des unités relatives comme les pourcentages.

Exemple :

.container {
    width: 100%; /* Utilise toute la largeur disponible */
    max-width: 1200px; /* Limite la largeur maximale */
    margin: 0 auto; /* Centre le conteneur */
}

Dans cet exemple, le conteneur prendra toute la largeur disponible sur l’écran tout en étant limité à un maximum de 1200 pixels.

Media Queries​

Les Media Queries sont l’un des outils les plus puissants pour créer des conceptions adaptatives. Elles permettent d’appliquer des styles CSS spécifiques selon la taille de l’écran de l’utilisateur.

Syntaxe de base :​

@media only screen and (max-width: 768px) {
    /* Styles CSS pour les écrans de moins de 768px */
}

Exemple pratique​

/* Style par défaut pour les grands écrans */
.container {
    width: 80%;
    margin: 0 auto;
}

@media only screen and (max-width: 768px) {
    .container {
        width: 100%; /* Le conteneur prend toute la largeur sur petits écrans */
    }
}

Cet exemple ajuste la largeur d’un conteneur pour qu’il occupe 80 % de la largeur sur les grands écrans et 100 % sur les petits écrans (comme les téléphones).

Unités Flexibles (em, rem, %)​

Au lieu d’utiliser des unités fixes comme les pixels, il est recommandé d’utiliser des unités flexibles qui s’ajustent en fonction de la taille de la fenêtre ou de la taille du texte.

  • em : Basé sur la taille de la police parent.
  • rem : Basé sur la taille de la police de l’élément racine (généralement <html>).
  • % : Basé sur la taille du conteneur parent.

Exemple d’utilisation des unités flexibles :​

body {
    font-size: 16px; /* Taille par défaut */
}

h1 {
    font-size: 2.5rem; /* 2.5 fois la taille de la police du corps */
}

.container {
    width: 50%; /* 50% de la taille du conteneur parent */
}