Variables CSS dans les Media Queries

Les Media Queries consistent à définir différentes règles de style pour divers appareils (écrans, tablettes, téléphones mobiles, etc.). Vous pouvez en apprendre davantage sur les Media Queries dans notre Chapitre sur les Media Queries .

Nous souhaitons maintenant définir une valeur de variable pour les écrans de moins de 450px de large, et une autre valeur pour ceux de plus de 450px de large.

Ici, nous déclarons d'abord une nouvelle variable locale nommée --fontsize pour la classe .container . Nous lui attribuons une valeur de 20 pixels. Ensuite, nous créons une règle @media qui indique : "Lorsque la largeur du navigateur est de 450px ou plus, changez la valeur de la variable --fontsize de la classe .container à 40px."

Exemple

 :root { 
 --primary-bg-color: #1e90ff; 
 --primary-color: #ffffff; 
 } 
 
 body { 
 background-color: var(--primary-bg-color); 
 } 
 
 .container { 
 --fontsize: 20px; 
 color: var(--primary-bg-color); 
 background-color: var(--primary-color); 
 padding: 15px; 
 font-size: var(--fontsize); 
 } 
 
 .container h2 { 
 border-bottom: 2px solid var(--primary-bg-color); 
 } 
 
 @media screen and (min-width: 450px) { 
 .container { 
 --fontsize: 40px; 
 } 
 } 

Essayez-le vous-même »

Voici un autre exemple où nous changeons également la valeur de la variable --primary-bg-color dans la règle @media :

Exemple

 :root { 
 --primary-bg-color: #1e90ff; 
 --primary-color: #ffffff; 
 } 
 
 body { 
 background-color: var(--primary-bg-color); 
 } 
 
 .container { 
 --fontsize: 20px; 
 color: var(--primary-bg-color); 
 background-color: var(--primary-color); 
 padding: 15px; 
 font-size: var(--fontsize); 
 } 
 
 .container h2 { 
 border-bottom: 2px solid var(--primary-bg-color); 
 } 
 
 @media screen and (min-width: 450px) { 
 .container { 
 --fontsize: 40px; 
 } 
 :root { 
 --primary-bg-color: lightblue; 
 } 
 } 

Essayez-le vous-même »

Fonction CSS var()

Fonction	Description
var()	Insère la valeur d'une variable CSS