4.1 Conceptos básicos
Las variables CSS y los media queries proporcionan herramientas poderosas para crear un diseño web responsivo que se adapta automáticamente a diferentes tamaños de pantalla y dispositivos. Las variables permiten gestionar estilos de forma centralizada, mientras que los media queries permiten cambiar estos estilos según las condiciones, como el ancho de la pantalla.
Conceptos básicos
- Variables CSS: permiten definir valores que se pueden reutilizar en todo el código CSS. Pueden ser modificadas en diferentes contextos, como los media queries, lo que las hace especialmente útiles para el diseño adaptativo.
- Media queries: permiten aplicar estilos CSS dependiendo de las características del dispositivo, como el ancho o alto de la pantalla. Esto permite adaptar la apariencia y el comportamiento de la página web a diferentes dispositivos.
Uso de variables en media queries
Las variables CSS se pueden usar dentro de los media queries para cambiar los valores de estilo en base a condiciones. Esto permite crear diseños más flexibles y fáciles de mantener.
Ejemplo de uso de variables en media queries:
:root {
--main-bg-color: #f0f0f0;
--main-text-color: #333;
--primary-color: #3498db;
--font-size: 16px;
}
body {
background-color: var(--main-bg-color);
color: var(--main-text-color);
font-size: var(--font-size);
}
a {
color: var(--primary-color);
}
@media (max-width: 600px) {
:root {
--main-bg-color: #e0e0e0;
--font-size: 14px;
}
}
@media (min-width: 601px) and (max-width: 1200px) {
:root {
--main-bg-color: #d0d0d0;
--font-size: 15px;
}
}
@media (min-width: 1201px) {
:root {
--main-bg-color: #f0f0f0;
--font-size: 16px;
}
}
<body>
<p>Este es un párrafo con un enlace a <a href="#">Example.com</a>.</p>
</body>
Explicación:
En este ejemplo, los valores de las variables cambian según el ancho de la pantalla:
- Para pantallas de hasta 600px, el fondo cambia a un tono más oscuro y el tamaño de letra se reduce.
- Para pantallas de entre 601px y 1200px, el fondo cambia a un tono medio y el tamaño de letra aumenta un poco.
- Para pantallas de más de 1200px se aplican los valores originales de las variables.
4.2 Ejemplos de variables en media queries
Ejemplo 1: Márgenes y tamaños de letra adaptativos
:root {
--padding: 20px;
--font-size: 16px;
}
.container {
padding: var(--padding);
font-size: var(--font-size);
}
@media (max-width: 600px) {
:root {
--padding: 10px;
--font-size: 14px;
}
}
@media (min-width: 601px) and (max-width: 1200px) {
:root {
--padding: 15px;
--font-size: 15px;
}
}
@media (min-width: 1201px) {
:root {
--padding: 20px;
--font-size: 16px;
}
}
<div class="container">
<p>Este es un contenedor adaptable con márgenes y tamaño de letra ajustables.</p>
</div>
Explicación:
- En este ejemplo, el contenedor
.containercambia sus márgenes y tamaño de letra dependiendo del ancho de la pantalla
Ejemplo 2: Tematización del sitio usando variables y media queries
:root {
--bg-color: #ffffff;
--text-color: #000000;
--link-color: #3498db;
}
body {
background-color: var(--bg-color);
color: var(--text-color);
}
a {
color: var(--link-color);
}
@media (prefers-color-scheme: dark) {
:root {
--bg-color: #000000;
--text-color: #ffffff;
--link-color: #9b59b6;
}
}
<body>
<p>Este texto y enlace se adaptarán al esquema de color preferido del usuario. Visita <a href="#">Example.com</a>.</p>
</body>
Explicación:
-
En este ejemplo, el sitio cambia el esquema de color dependiendo de las preferencias del usuario (
prefers-color-scheme: dark). El color de fondo, el texto y los enlaces se cambian automáticamente al alternar entre el tema claro y oscuro
4.3 Rejilla adaptable
Ejemplo de uso de variables y media queries para una rejilla adaptable:
:root {
--columns: 1fr;
--gap: 10px;
}
.grid-container {
display: grid;
grid-template-columns: var(--columns);
gap: var(--gap);
}
@media (min-width: 600px) {
:root {
--columns: 1fr 1fr;
}
}
@media (min-width: 900px) {
:root {
--columns: 1fr 1fr 1fr;
}
}
<div class="grid-container">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
<div>Item 4</div>
</div>
Explicación:
- En este ejemplo se utiliza una rejilla adaptable que cambia el número de columnas según el ancho de la pantalla. En pantallas estrechas (hasta 600px) la rejilla tiene una columna, en medianas (de 600px a 900px) dos columnas, y en anchas (más de 900px) tres columnas
GO TO FULL VERSION