Variabili in query media CSS

Usare variabili nella query media

Ora, desideriamo modificare il valore della variabile nella query media.

Suggerimento:Le query media sono progettate per definire regole di stile diverse per diversi dispositivi (monitor, tablet, smartphone, ecc.). Puoi imparare di più sulle query media nella sezione "Query media".

Qui, prima di tutto, dichiariamo una nuova variabile locale chiamata --fontsize per la classe .container. Impostiamo il suo valore a 25 pixel. Poi lo usiamo ulteriormente nella classe .container. Poi, creiamo una regola @media con il contenuto "Quando la larghezza del browser è di 450px o più larga, cambia il valore della variabile --fontsize della classe .container a 50px."

Questo è un esempio completo:

实例

/* 变量声明 */
: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;
  }
}

Prova personalmente

Questo è un altro esempio, in cui abbiamo anche modificato il valore della variabile --blue nella regola @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;
  }
}

Prova personalmente

Supporto del browser

I numeri nella tabella indicano la versione del browser che supporta completamente l'attributo.

Funzione
var() 49.0 15.0 31.0 9.1 36.0

Funzione var() CSS

Funzione Descrizione
var() Inserisci il valore della variabile CSS.