Porqué cambia cuando volteo el dispositivo?

[jakijem]

Si tengo dos mediaqueries, una para formato landscape y otro para portrait, en el css, cuando volteo el dispositivo (por ejemplo, el smartphone) se descompone, pues se ha cargado la primera mediaquery pero no la del otro estado...

No se si me explico...

¿Hay alguna manera de que cargue el css que necesite cada vez que se gira el dispositivo (sin tener que recargar la página)?

[xfxstudios]

va a depender de como configuraste la mediaqueries, si las configuraste con medidas o que, por ejemplo:

por medidas:

Código CSS:

/* para pc: */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
 
@media only screen and (max-width: 768px) {
    /* para smartphone: */
    [class*="col-"] {
        width: 100%;
    }
}
 

por orientacion:

Código CSS:

@media only screen and (orientation: landscape) {
    body {
        background-color: lightblue;
    }
}
 

[jakijem]

Iniciado por xfxstudios

va a depender de como configuraste la mediaqueries, si las configuraste con medidas o que,

Tengo un solo CSS con todas las mediaqueries dentro de esta manera:

Código:

/* 03 ------------------------- SMARTPHONE 5" PORTRAIT ---------------------------- */

    @media only screen and (min-width: 241px) and (max-width: 414px) and (orientation : portrait) {
               (css para estas medidas)
                }


/* 04 ------------------------- SMARTPHONE 5" LANDSCAPE ---------------------------- */

    @media only screen and (min-width: 321px) and (max-width: 736px) and (orientation : landscape) {

                (css para estas medidas)

                }

    etc...

[jakijem]

ninguna idea? que es lo que estoy haciendo mal???