Uso de variáveis em consultas de mídia CSS

Uso de variáveis dentro da consulta de mídia

Agora, queremos alterar o valor da variável dentro da consulta de mídia.

Dica:As consultas de mídia visam definir regras de estilo diferentes para diferentes dispositivos (monitores, tablets, celulares, etc.). Você pode aprender mais sobre consultas de mídia no capítulo 'Consultas de Mídia'.

Aqui, primeiramente declaramos uma nova variável local chamada --fontsize para a classe .container. Seta seu valor para 25 pixels. Em seguida, usamos essa variável dentro da classe .container. Em seguida, criamos uma regra @media, cujo conteúdo é 'Quando a largura da browser for 450px ou maior, altera o valor da variável --fontsize da classe .container para 50px.'

Este é o exemplo completo:

Exemplo

/* Declaração de variáveis */
:root {
  --blue: #1e90ff;
  --white: #ffffff;
}
.container {
  --fontsize: 25px;
}
/* Estilos */
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;
  }
}

Experimente pessoalmente

Este é outro exemplo, onde também alteramos o valor da variável --blue nas regras @media:

Exemplo

/* Declaração de variáveis */
:root {
  --blue: #1e90ff;
  --white: #ffffff;
}
.container {
  --fontsize: 25px;
}
/* Estilos */
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;
  }
}

Experimente pessoalmente

Suporte do navegador

Os números na tabela indicam a primeira versão do navegador que suporta completamente essa propriedade.

Função
var() 49.0 15.0 31.0 9.1 36.0

Função var() CSS

Função Descrição
var() Insira o valor da variável CSS.