CSS usando variáveis em consultas de mídia
Usando variáveis em consultas de mídia
Agora queremos alterar um valor de variável dentro de uma consulta de mídia.
Dica: Consultas de mídia tratam da definição de regras de estilo diferentes para diferentes dispositivos (telas, tablets, telefones celulares etc.). Você pode aprender mais consultas de mídia em nosso capítulo de consultas de mídia .
Aqui, primeiro declaramos uma nova variável local chamada --fontsize para a
.container
classe. Definimos seu valor para 25 pixels. Em seguida, usamos na
.container
classe mais abaixo. Em seguida, criamos uma
@media
regra que diz "Quando a largura do navegador for 450px ou maior, altere o valor da variável --fontsize da
.container
classe 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;
}
}
Aqui está outro exemplo em que também alteramos o valor da variável --blue na @media
regra:
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;
}
}
Suporte ao navegador
Os números na tabela especificam a primeira versão do navegador que suporta totalmente a
var()
função.
Function | |||||
---|---|---|---|---|---|
var() | 49.0 | 15.0 | 31.0 | 9.1 | 36.0 |
Função CSS var()
Property | Description |
---|---|
var() | Inserts the value of a CSS variable |