27 de agosto de 2013

CSS: Adaptar estilos en móviles según la orientación

Hoy en día los usuarios acceden a las webs desde cualquier dispositivo, se han acabado los tiempos en los que podías tener la certeza de que tus visitantes utilizaban un monitor de culo con una resolución de 800x600 píxeles.

Ahora los usuarios usan el navegador desde un móvil o una consola. En el caso de los móviles es habitual girarlos y girarlos mientras navegas para ver mejor el contenido.

Gracias a CSS podemos detectar la orientación del dispositivo y cambiar los estilos según nos convenga.

Os pongo a continuación como hacerlo. Obviamente este tipo de código debe ir dentro de la hoja de estilos.
/* Portrait o Vertical */ 
@media screen and (orientation:portrait) {
     /* Aquí van los estilos para las pantallas en vertical */


/* Landscape */
@media screen and (orientation:landscape) { 
    /* Aquí van los estilos para las pantallas en horizontal */ 
}

Espero que os sea de utilidad.

2 comentarios:

marc20id dijo...

Gracias por la info! parece mentira, pero he tenido que buscar un buen rato para encotrar como hacerlo en CSS y no en javascript.

Saludos:)

programandoenmicuarto dijo...

Añadir solo que si quieres que se realice a partir de una determinada medida se puede completemntar asi:

@media screen and (orientation:landscape) and (min-width:300px) {
/* Aquí van los estilos para las pantallas en horizontal a partir de que mida un minimo de 300px*/


}