Utilisation des variables dans les requêtes média CSS

Utilisation des variables dans les requêtes média

Maintenant, nous souhaitons modifier la valeur de la variable dans la requête média.

Astuce :Les requêtes média visent à définir des règles de style différentes pour différents appareils (écrans, tablettes, téléphones, etc.). Vous pouvez en apprendre davantage sur les requêtes média dans le chapitre "Requêtes média".

Ici, nous déclarons d'abord une nouvelle variable locale nommée --fontsize pour la classe .container. Nous lui assignons une valeur de 25 pixels. Ensuite, nous l'utilisons davantage dans la classe .container. Ensuite, nous créons une règle @media, dont le contenu est "Lorsque la largeur du navigateur est de 450px ou plus large, changez la valeur de la variable --fontsize de la classe .container en 50px."

Voici un exemple complet :

实例

/* 变量声明 */
:root {
  --blue: #1e90ff;
  --white: #ffffff;
}
.container {
  --fontsize: 25px;
}
/* 样式 */
body {
  background-color: var(--blue);
}
h2 {
  border-bottom: 2px solid var(--blue);
}
.container {
  color: var(--blue);
  background-color: var(--white);
  padding: 15px;
  font-size: var(--fontsize);
}
@media screen and (min-width: 450px) {
  .container {
    --fontsize: 50px;
  }
}

Essayez-le vous-même

Ceci est un autre exemple, où nous avons également modifié la valeur de la variable --blue dans les règles @media :

实例

/* 变量声明 */
:root {
  --blue: #1e90ff;
  --white: #ffffff;
}
.container {
  --fontsize: 25px;
}
/* 样式 */
body {
  background-color: var(--blue);
}
h2 {
  border-bottom: 2px solid var(--blue);
}
.container {
  color: var(--blue);
  background-color: var(--white);
  padding: 15px;
  font-size: var(--fontsize);
}
@media screen and (min-width: 450px) {
  .container {
    --fontsize: 50px;
  }
   :root {
    --blue: lightblue;
  }
}

Essayez-le vous-même

Prise en charge du navigateur

Les nombres dans le tableau indiquent la version la plus ancienne du navigateur qui prend en charge cette propriété en complétude.

Fonction
var() 49.0 15.0 31.0 9.1 36.0

Fonction var() CSS

Fonction Description
var() Insérer la valeur de la variable CSS.