En aquest tema, explorarem com les variables CSS poden ser utilitzades per millorar el disseny responsive dels llocs web. Les variables CSS, també conegudes com a propietats personalitzades, permeten definir valors reutilitzables que poden ser utilitzats en múltiples llocs dins del full d'estil. Això facilita la gestió i l'actualització dels estils, especialment en dissenys complexos i responsius.

Les variables CSS són una característica que permet definir valors que poden ser reutilitzats en tot el full d'estil. Aquestes variables es defineixen amb un prefix de doble guió (--) i es poden utilitzar amb la funció var().

• Definició de Variables: Les variables es defineixen dins del selector :root, que representa l'element arrel del document. Això fa que les variables estiguin disponibles globalment.
• Ús de Variables: Les variables es poden utilitzar amb la funció var(), que substitueix la variable pel seu valor definit.
• Càlculs amb Variables: Les variables es poden utilitzar en càlculs, com es veu en l'exemple del botó, on la mida de la font es calcula multiplicant la variable --font-size-base.

1. Consistència: Les variables permeten mantenir una paleta de colors i estils consistent a través de tot el lloc web.
2. Facilitat de Manteniment: Canviar el valor d'una variable actualitza automàticament tots els llocs on s'utilitza, simplificant el manteniment.
3. Adaptabilitat: Les variables poden ser modificades amb media queries per adaptar-se a diferents mides de pantalla.

Les variables CSS poden ser modificades dins de media queries per ajustar els estils segons la mida de la pantalla.

• Definició Inicial: La mida de la font base es defineix inicialment com a 16px.
• Media Query: Quan la mida de la pantalla és de 600px o menys, la mida de la font base es redueix a 14px.
• Aplicació: El cos del document utilitza la mida de la font definida per la variable, que s'ajusta automàticament segons la mida de la pantalla.

Objectiu: Crea un esquema de colors responsive utilitzant variables CSS.

1. Defineix variables per als colors primari i secundari.
2. Utilitza aquestes variables per establir els colors de fons i de text en diferents elements.
3. Crea una media query per canviar els colors quan la pantalla sigui més petita de 768px.

Les variables CSS són una eina poderosa per al disseny responsive, ja que permeten una gestió més eficient dels estils i una adaptabilitat millorada a diferents dispositius. En el proper tema, explorarem com el JavaScript pot complementar el disseny responsive per crear experiències d'usuari encara més dinàmiques.