Leçons
Démarrer
Démarrer la formation
CodeGym /Cours Java /Frontend SELF FR /Variables dans les media queries

Variables dans les media queries

Frontend SELF FR
Niveau 31 , Leçon 3
Disponible

4.1 Concepts de base

Les variables CSS et les media queries offrent des outils puissants pour créer un design web adaptatif qui s'ajuste automatiquement à différentes tailles d'écran et appareils. Les variables permettent de gérer les styles de manière centralisée, et les media queries permettent de modifier ces styles selon les conditions, comme la largeur de l'écran.

Concepts de base

  • Variables CSS: permettent de définir des valeurs réutilisables dans tout le code CSS. Elles peuvent être modifiées dans différents contextes, comme les media queries, ce qui les rend particulièrement utiles pour le design adaptatif.
  • Media queries: permettent d'appliquer des styles CSS selon les caractéristiques de l'appareil, telles que la largeur ou la hauteur de l'écran. Cela permet d'adapter l'apparence et le comportement de la page web à différents appareils.

Utilisation des variables dans les media queries

Les variables CSS peuvent être utilisées à l'intérieur des media queries pour modifier les valeurs des styles selon les conditions. Cela permet de créer des designs plus flexibles et faciles à maintenir.

Exemple d'utilisation des variables dans les media queries :

CSS
    
      :root {
        --main-bg-color: #f0f0f0;
        --main-text-color: #333;
        --primary-color: #3498db;
        --font-size: 16px;
      }

      body {
        background-color: var(--main-bg-color);
        color: var(--main-text-color);
        font-size: var(--font-size);
      }

      a {
        color: var(--primary-color);
      }

      @media (max-width: 600px) {
        :root {
          --main-bg-color: #e0e0e0;
          --font-size: 14px;
        }
      }

      @media (min-width: 601px) and (max-width: 1200px) {
        :root {
          --main-bg-color: #d0d0d0;
          --font-size: 15px;
        }
      }

      @media (min-width: 1201px) {
        :root {
          --main-bg-color: #f0f0f0;
          --font-size: 16px;
        }
      }
HTML
    
      <body>
        <p>This is a paragraph with a link to <a href="#">Example.com</a>.</p>
      </body>

Explication :

Dans cet exemple, les valeurs des variables changent selon la largeur de l'écran :

  • Pour les écrans jusqu'à 600px, le fond change pour une teinte plus foncée, et la taille de la police diminue.
  • Pour les écrans de 601px à 1200px, le fond change pour une teinte moyenne, et la taille de la police augmente légèrement.
  • Pour les écrans de plus de 1200px, les valeurs initiales des variables sont appliquées.

4.2 Exemples de variables dans les media queries

Exemple 1 : Marges et tailles de police adaptatives

CSS
    
      :root {
        --padding: 20px;
        --font-size: 16px;
      }

      .container {
        padding: var(--padding);
        font-size: var(--font-size);
      }

      @media (max-width: 600px) {
        :root {
          --padding: 10px;
          --font-size: 14px;
        }
      }

      @media (min-width: 601px) and (max-width: 1200px) {
        :root {
          --padding: 15px;
          --font-size: 15px;
        }
      }

      @media (min-width: 1201px) {
        :root {
          --padding: 20px;
          --font-size: 16px;
        }
      }
HTML
    
      <div class="container">
        <p>This is a responsive container with adaptive padding and font size.</p>
      </div>

Explication :

  • Dans cet exemple, le conteneur .container modifie ses marges et la taille de la police selon la largeur de l'écran

Exemple 2 : Thématisation du site à l'aide de variables et de media queries

CSS
    
      :root {
        --bg-color: #ffffff;
        --text-color: #000000;
        --link-color: #3498db;
      }

      body {
        background-color: var(--bg-color);
        color: var(--text-color);
      }

      a {
        color: var(--link-color);
      }

      @media (prefers-color-scheme: dark) {
        :root {
          --bg-color: #000000;
          --text-color: #ffffff;
          --link-color: #9b59b6;
        }
      }
HTML
    
      <body>
        <p>This text and link will adapt to the user's preferred color scheme. Visit <a href="#">Example.com</a>.</p>
      </body>

Explication :

  • Dans cet exemple, le site modifie le thème de couleur selon les préférences de l'utilisateur (prefers-color-scheme: dark). La couleur de fond, de texte et des liens change automatiquement lors du passage entre le thème clair et le thème sombre

4.3 Grille adaptative

Exemple d'utilisation des variables et des media queries pour une grille adaptative :

CSS
    
      :root {
        --columns: 1fr;
        --gap: 10px;
      }

      .grid-container {
        display: grid;
        grid-template-columns: var(--columns);
        gap: var(--gap);
      }

      @media (min-width: 600px) {
        :root {
          --columns: 1fr 1fr;
        }
      }

      @media (min-width: 900px) {
        :root {
          --columns: 1fr 1fr 1fr;
        }
      }
HTML
    
      <div class="grid-container">
        <div>Item 1</div>
        <div>Item 2</div>
        <div>Item 3</div>
        <div>Item 4</div>
      </div>

Explication :

  • Dans cet exemple, une grille adaptable est utilisée, qui modifie le nombre de colonnes selon la largeur de l'écran. Sur les écrans étroits (jusqu'à 600px), la grille a une colonne, sur les écrans moyens (de 600px à 900px) deux colonnes, et sur les écrans larges (plus de 900px) trois colonnes
Commentaires
TO VIEW ALL COMMENTS OR TO MAKE A COMMENT,
GO TO FULL VERSION