Canvi orientació de la pantalla

Entrem en el ball de les orientacions 💃📱. Quan la gent gira el mòbil, el disseny ha de fer una coreografia nova per adaptar-se a l’espai horitzontal o vertical. Les @media queries amb orientation són com els passos de dansa que indiquen com s’ha de moure cada element.

Aquí tens un resum clar del que passa:

🔄 Quan el mòbil canvia d’orientació...

🧍‍♂️ Retrat (vertical)

@media screen and (max-width: 768px) and (orientation: portrait)

Capçalera header: s’amplia el padding vertical a 25px 0, donant més aire a la part superior i inferior.

• Ideal per quan el mòbil està en posició natural (més alt que ample), pensat per llegir i fer scroll.

🧭 Paisatge (horizontal)

@media screen and (max-width: 930px) and (orientation: landscape)

Galeria .gallery: es reorganitza en dues columnes, aprofitant millor l’amplada extra.

• Perfecte per quan el mòbil està girat (més ample que alt), com quan mires vídeos o jugues.

🖼️ I si la pantalla té alta resolució (Retina)?

@media only screen and (-webkit-min-device-pixel-ratio: 2),
       only screen and (min-resolution: 192dpi)

Aquí no hi ha estil aplicat encara, però podries:

• Carregar imatges més nítides (image@2x.png)
• Ajustar detalls visuals com icones o ombres per evitar que es vegin borroses

🧠 Per què és important tot això?

• Millora l’experiència visual: cada orientació té necessitats diferents.
• Evita dissenys trencats: sense aquestes media queries, podries acabar amb galeries massa estretes o capçaleres comprimides.
• Dóna control total: pots decidir què mostrar i com, segons com l’usuari sosté el dispositiu.

🧠 El codi sencer per canvi d'orientació de la pantalla i resolució del navegador

 /* Orientació: retrat (vertical) */
        @media screen and (max-width: 768px) and (orientation: portrait) { /* Ajustos per a pantalles en orientació vertical */
            header { /* Ajusta la capçalera */
                padding: 25px 0; /* Espaiat vertical */
            }
        }
        
        /* Orientació: paisatge (horizontal) */
        @media screen and (max-width: 930px) and (orientation: landscape) { /* Ajustos per a pantalles en orientació horitzontal */
            .gallery {  /* Ajusta la graella de la galeria */
                grid-template-columns: repeat(2, 1fr); /* Dues columnes */
            }
        }
        
        /* Exemple per a dispositius amb alta resolució (retina) */
        @media only screen and (-webkit-min-device-pixel-ratio: 2), /* Safari i Chrome */
               only screen and (min-resolution: 192dpi) { /* Altres navegadors */
            /* Podem carregar imatges de major resolució per a pantalles retina */
        }