CSS usando variables en consultas de medios
Uso de variables en consultas de medios
Ahora queremos cambiar el valor de una variable dentro de una consulta de medios.
Sugerencia: las consultas de medios consisten en definir diferentes reglas de estilo para diferentes dispositivos (pantallas, tabletas, teléfonos móviles, etc.). Puede obtener más información sobre Consultas de medios en nuestro Capítulo de Consultas de medios .
Aquí, primero declaramos una nueva variable local llamada --fontsize para la
.container
clase. Establecemos su valor en 25 píxeles. Luego lo usamos en la
.container
clase más abajo. Luego, creamos una
@media
regla que dice "Cuando el ancho del navegador es de 450 px o más, cambie el valor de la variable --fontsize de la
.container
clase a 50 px".
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;
}
}
Aquí hay otro ejemplo donde también cambiamos el valor de la variable --blue en la @media
regla:
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;
}
}
Compatibilidad con navegador
Los números de la tabla especifican la primera versión del navegador que es totalmente compatible con la
var()
función.
Function | |||||
---|---|---|---|---|---|
var() | 49.0 | 15.0 | 31.0 | 9.1 | 36.0 |
Función CSS var()
Property | Description |
---|---|
var() | Inserts the value of a CSS variable |