Contingut Principal
Aquest és el contingut principal de la pàgina. Amb les @media queries, aquesta secció s'adaptarà a diferents mides de pantalla.
Com funcionen les @media queries?
Les @media queries són una tècnica de CSS que permeten aplicar estils diferents segons característiques específiques del dispositiu, com l'amplada de la pantalla, l'orientació o la resolució.
Els punts de ruptura (breakpoints) més comuns són:
- 1024px - Tablets en orientació horitzontal
- 768px - Tablets petites o mòbils grans
- 480px - Mòbils
Galeria d'imatges responsiva
La següent galeria s'adaptarà automàticament segons la mida de pantalla:
Barcelona
Girona
Tarragona
Lleida
Costa Brava
Pirineus
Taula responsiva
Les taules també s'adapten a mides de pantalla petites:
| Ciutat | Habitants | Extensió (km²) | Densitat |
|---|---|---|---|
| Barcelona | 1.620.343 | 101.4 | 15.992 |
| Girona | 101.852 | 39.1 | 2.604 |
| Tarragona | 134.515 | 63.2 | 2.128 |
| Lleida | 138.956 | 212.3 | 654 |
Secció amb icones
Aquestes característiques es mostren amb icones i text:
Compatible amb mòbils
El nostre disseny s'adapta perfectament a qualsevol dispositiu mòbil.
Optimitzat per a tablets
Funciona perfectament en tablets amb diferents mides de pantalla.
Escriptori
Experiència completa per a usuaris d'ordinador.