En aquest tema, explorarem com JavaScript pot complementar el disseny responsive per crear experiències d'usuari més dinàmiques i adaptatives. JavaScript pot ajudar a ajustar el disseny d'una pàgina web en temps real, basant-se en les interaccions de l'usuari i les característiques del dispositiu.
Conceptes Clau
-
Detecció de la mida de la finestra:
- JavaScript pot detectar la mida de la finestra del navegador i ajustar el disseny en conseqüència.
- Utilitza l'objecte
window
per obtenir informació sobre l'amplada i l'alçada de la finestra.
-
Manipulació del DOM:
- JavaScript pot modificar el Document Object Model (DOM) per canviar l'estructura i l'estil de la pàgina en resposta a esdeveniments.
-
Esdeveniments de redimensionament:
- L'esdeveniment
resize
permet executar codi JavaScript cada vegada que la finestra del navegador es redimensiona.
- L'esdeveniment
-
Media Queries en JavaScript:
- Utilitza l'API
window.matchMedia()
per aplicar media queries directament des de JavaScript.
- Utilitza l'API
Exemple Pràctic
A continuació, veurem un exemple de com utilitzar JavaScript per canviar el disseny d'una pàgina en funció de la mida de la finestra.
<!DOCTYPE html> <html lang="ca"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Disseny Responsive amb JavaScript</title> <style> body { font-family: Arial, sans-serif; transition: background-color 0.5s; } .small-screen { background-color: lightblue; } .large-screen { background-color: lightcoral; } </style> </head> <body> <h1>Benvingut al Disseny Responsive amb JavaScript</h1> <script> function adjustLayout() { if (window.innerWidth < 600) { document.body.classList.add('small-screen'); document.body.classList.remove('large-screen'); } else { document.body.classList.add('large-screen'); document.body.classList.remove('small-screen'); } } window.addEventListener('resize', adjustLayout); adjustLayout(); // Executa la funció al carregar la pàgina </script> </body> </html>
Explicació del Codi
- CSS: Definim dos estils de fons diferents per a pantalles petites i grans.
- JavaScript:
- La funció
adjustLayout()
comprova l'amplada de la finestra. - Si l'amplada és inferior a 600 píxels, aplica la classe
small-screen
. - Si l'amplada és superior o igual a 600 píxels, aplica la classe
large-screen
. - L'esdeveniment
resize
assegura que la funció s'executi cada vegada que la finestra es redimensiona. - La funció
adjustLayout()
s'executa inicialment per establir l'estil correcte quan es carrega la pàgina.
- La funció
Exercici Pràctic
Objectiu: Crea un script que canviï el text d'un element <p>
per indicar si la finestra és "petita" o "gran" segons la seva amplada.
Solució
<!DOCTYPE html> <html lang="ca"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Exercici de Disseny Responsive</title> </head> <body> <p id="size-indicator">La finestra és...</p> <script> function updateText() { const paragraph = document.getElementById('size-indicator'); if (window.innerWidth < 600) { paragraph.textContent = 'La finestra és petita'; } else { paragraph.textContent = 'La finestra és gran'; } } window.addEventListener('resize', updateText); updateText(); // Executa la funció al carregar la pàgina </script> </body> </html>
Explicació de l'Exercici
- JavaScript:
- La funció
updateText()
actualitza el contingut del paràgraf amb l'IDsize-indicator
. - Comprova l'amplada de la finestra i actualitza el text en conseqüència.
- L'esdeveniment
resize
assegura que el text s'actualitzi cada vegada que la finestra es redimensiona.
- La funció
Conclusió
JavaScript és una eina poderosa per millorar el disseny responsive, permetent ajustos dinàmics basats en les interaccions de l'usuari i les característiques del dispositiu. Amb la combinació de CSS i JavaScript, pots crear experiències d'usuari riques i adaptatives. En el següent tema, explorarem el futur del disseny responsive i com les noves tecnologies poden influir en el seu desenvolupament.
Curs de Disseny Responsive
Mòdul 1: Introducció al Disseny Responsive
- Què és el Disseny Responsive?
- Història i Importància del Disseny Responsive
- Principis Bàsics del Disseny Responsive
Mòdul 2: Fonaments d'HTML i CSS
Mòdul 3: Media Queries
- Comprensió de les Media Queries
- Ús de les Media Queries en CSS
- Punts de Trencament i Dissenys Responsius