🎯 Objectiu

Crear una pàgina web que s’adapti automàticament a diferents mides de pantalla (mòbil, tablet, escriptori) utilitzant la tècnica de les @media queries en CSS.

🛠️ Elements principals del projecte

1. Contingut principal adaptatiu

• La secció principal canvia de disposició segons la mida de la pantalla.

• Exemple: en mòbil, el contingut s’apila verticalment per facilitar la lectura.

2. Galeria d’imatges responsiva

• Imatges de ciutats com Barcelona, Girona, Tarragona, etc.

• La galeria es reorganitza automàticament per mostrar-se en columnes o files segons el dispositiu.

3. Taula de dades flexible

• Taula amb informació de població, extensió i densitat de diverses ciutats.

• En pantalles petites, la taula es redueix per mantenir la llegibilitat.

4. Barra lateral intel·ligent

• En escriptori: apareix al costat del contingut.

• En mòbil/tablet: es desplaça sota el contingut principal per millorar l’experiència d’usuari.

5. Icones informatives

• S’utilitzen icones per destacar la compatibilitat amb mòbils, tablets i escriptori.

📐 Punts de ruptura utilitzats

• 1024px: per a tablets en horitzontal

• 768px: per a tablets petites o mòbils grans

• 480px: per a mòbils

💡 Consells aplicats

• Enfocament Mobile First: primer es dissenya per a mòbil i després s’adapta a pantalles més grans.

• S’han tingut en compte altres factors com:

  • Orientació del dispositiu

  • Resolució

  • Preferències d’accessibilitat (contrast, animacions reduïdes)

👨‍💻 Sobre el desenvolupador

Projecte creat per una empresa especialitzada en disseny web amb HTML, CSS i JavaScript

Podeu veure la pàgina creada en aquest enllaç 👉 CSS Responsiu - @media queries ampliat