En aquesta secció, explorarem alguns dels patrons de disseny responsiu més comuns que s'utilitzen per crear llocs web que s'adapten a diferents mides de pantalla i dispositius. Aquests patrons ajuden a garantir que el contingut sigui accessible i fàcil de llegir, independentment del dispositiu que s'utilitzi.
- Patró de Columna Fluida
Descripció
- El patró de columna fluida utilitza un disseny de columna única que s'adapta a l'amplada de la pantalla.
- És ideal per a dispositius mòbils, on l'espai és limitat.
Implementació
<!DOCTYPE html> <html lang="ca"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> .container { width: 100%; padding: 10px; box-sizing: border-box; } </style> <title>Patró de Columna Fluida</title> </head> <body> <div class="container"> <h1>Benvingut al nostre lloc web</h1> <p>Aquest és un exemple de patró de columna fluida.</p> </div> </body> </html>
Explicació
- Utilitzem
width: 100%
per assegurar-nos que la columna ocupi tota l'amplada disponible. box-sizing: border-box
s'utilitza per incloure el padding i el border dins de l'amplada total de l'element.
- Patró de Graella
Descripció
- El patró de graella divideix el contingut en múltiples columnes i files.
- És útil per a pantalles més grans, com les de tauletes i ordinadors.
Implementació
<!DOCTYPE html> <html lang="ca"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> .grid-container { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; } .grid-item { background-color: #f0f0f0; padding: 20px; text-align: center; } </style> <title>Patró de Graella</title> </head> <body> <div class="grid-container"> <div class="grid-item">Element 1</div> <div class="grid-item">Element 2</div> <div class="grid-item">Element 3</div> <div class="grid-item">Element 4</div> </div> </body> </html>
Explicació
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr))
crea una graella flexible que s'adapta a l'amplada de la pantalla.gap: 10px
afegeix espai entre els elements de la graella.
- Patró de Barra Lateral
Descripció
- Aquest patró inclou una barra lateral que pot contenir navegació o informació addicional.
- Sovint es col·loca a l'esquerra o a la dreta del contingut principal.
Implementació
<!DOCTYPE html> <html lang="ca"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> .sidebar-layout { display: flex; flex-wrap: wrap; } .sidebar { flex: 1; min-width: 200px; background-color: #e0e0e0; padding: 20px; } .main-content { flex: 3; min-width: 300px; padding: 20px; } </style> <title>Patró de Barra Lateral</title> </head> <body> <div class="sidebar-layout"> <div class="sidebar">Barra Lateral</div> <div class="main-content">Contingut Principal</div> </div> </body> </html>
Explicació
- Utilitzem
display: flex
per crear un disseny flexible que s'adapta a diferents mides de pantalla. flex: 1
iflex: 3
determinen la proporció d'espai que ocupa cada secció.
Exercici Pràctic
Objectiu: Implementar un disseny responsiu que utilitzi el patró de graella per mostrar una galeria d'imatges.
Instruccions
- Crea un document HTML amb una estructura de graella.
- Afegeix imatges a cada element de la graella.
- Assegura't que la graella sigui responsiva i s'adapti a diferents mides de pantalla.
Solució
<!DOCTYPE html> <html lang="ca"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> .gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; } .gallery-item { overflow: hidden; } .gallery-item img { width: 100%; height: auto; } </style> <title>Galeria Responsiva</title> </head> <body> <div class="gallery"> <div class="gallery-item"><img src="image1.jpg" alt="Imatge 1"></div> <div class="gallery-item"><img src="image2.jpg" alt="Imatge 2"></div> <div class="gallery-item"><img src="image3.jpg" alt="Imatge 3"></div> <div class="gallery-item"><img src="image4.jpg" alt="Imatge 4"></div> </div> </body> </html>
Explicació
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr))
assegura que les imatges s'ajustin automàticament a l'amplada disponible.- Les imatges s'ajusten a la mida de la graella gràcies a
width: 100%
iheight: auto
.
Conclusió
Els patrons responsius comuns són fonamentals per crear llocs web que s'adaptin a qualsevol dispositiu. Aquests patrons proporcionen una base sòlida per al disseny responsiu i poden ser combinats i modificats per satisfer les necessitats específiques de cada projecte. En el següent tema, explorarem el disseny Mobile-First, una estratègia clau per al desenvolupament web modern.
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