CSS usando variáveis em consultas de mídia

Índice

Usando variáveis em consultas de mídia

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

Dica: as consultas de mídia tratam da definição de diferentes regras de estilo para diferentes dispositivos (telas, tablets, celulares, etc.). Você pode aprender mais Consultas de mídia em nosso capítulo Consultas de mídia.

Aqui, primeiro declaramos uma nova variável local chamada --fontsize para o .container classe. Definimos seu valor para 25 pixels. Então usamos isso no .container classe mais abaixo. Então, criamos um regra @media que diz "Quando a largura do navegador for 450px ou maior, altere o valor da variável --fontsize do classe .container para 50px."

Aqui está o exemplo completo:

Exemplo

 /* Variable declarations */ 
:root {
  --blue: #1e90ff;
  --white: #ffffff; 
  }

  .container {
  --fontsize: 25px;
}
/* Styles */
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 você mesmo →

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
/* Variable declarations */ 
:root {
  --blue: #1e90ff;
  --white: #ffffff; 
}

.container {
  --fontsize: 25px;
}

/* Styles */ 
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;
  }
}
</style>
</head>
<body>

<h1>Using Variables in Media Queries</h1>

<div class="container">
  <h2>Lorem Ipsum</h2>
  <p>When the browser's width is less than 450px, the font-size of this div is 25px. When it is 450px or wider, set the --fontsize variable value to 50px. Resize the browser window to see the effect.</p>
</div>

</body>
</html>

Aqui está outro exemplo onde também alteramos o valor da variável --blue na regra @media:

Exemplo

 /* Variable declarations */ 
:root {
  --blue: #1e90ff;
  --white: #ffffff; 
  }

  .container {
  --fontsize: 25px;
}
/* Styles */
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 você mesmo →

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
/* Variable declarations */ 
:root {
  --blue: #1e90ff;
  --white: #ffffff; 
}

.container {
  --fontsize: 25px;
}

/* Styles */ 
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;
  }
}
</style>
</head>
<body>

<h1>Using Variables in Media Queries</h1>

<div class="container">
  <h2>Lorem Ipsum</h2>
  <p>When the browser's width is 450px or wider, set the --fontsize variable value to 50px and the --blue variable value to lightblue. Resize the browser window to see the effect.</p>
</div>

</body>
</html>

Suporte ao navegador

Os números na tabela especificam a primeira versão do navegador que suporta totalmente o Função var().

Function
var()	49.0	15.0	31.0	9.1	36.0

Função CSS var()

var(): Insere o valor de uma variável CSS