Uso de variables en consultas de medios CSS

Uso de variables en consultas de medios

Ahora, queremos modificar el valor de la variable dentro de la consulta de medios.

Consejo:Las consultas de medios están diseñadas para definir diferentes reglas de estilo para diferentes dispositivos (monitores, tabletas, teléfonos, etc.). Puede aprender más sobre las consultas de medios en el capítulo "Consultas de medios".

Aquí, primero declaramos una nueva variable local llamada --fontsize para la clase .container. Establecemos su valor en 25 píxeles. Luego, lo utilizamos adicionalmente en la clase .container. Luego, creamos una regla @media que contiene "Cuando el ancho del navegador sea de 450px o más ancho, cambie el valor de la variable --fontsize de la clase .container a 50px."

Este es el ejemplo completo:

Ejemplo

/* Declaración de variables */
: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;
  }
}

Prueba personalmente

Este es otro ejemplo, en el que también cambiamos el valor de la variable --blue en las reglas @media:

Ejemplo

/* Declaración de variables */
: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;
  }
}

Prueba personalmente

Compatibilidad del navegador

Los números en la tabla indican la versión del navegador que admite completamente la propiedad.

Función
var() 49.0 15.0 31.0 9.1 36.0

Función var() CSS

Función Descripción
var() Insertar el valor de la variable CSS.