CSS Using Variables in Media Queries

Uso de variables media queries

Ahora queremos cambiar el valor de una variable dentro de un media querie.

Tip: Los media queries consisten en definir diferentes reglas de estilo para diferentes dispositivos (pantallas, tabletas, teléfonos móviles, etc.).

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

Aquí está el ejemplo completo:

Ejemplo:

/* 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;
  }
}

Ver ejemplo

Aquí hay otro ejemplo donde también cambiamos el valor de la variable --blue en la regla @media:

Ejemplo:

/* 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;
  }
}

Ver ejemplo

Compatibilidad con el navegador

Los números de la tabla especifican la primera versión del navegador que es totalmente compatible con la función var().

La función var()

Traducido con 💚 desde W3Schools.com