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.
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.
Comentarios
Saludos:)
@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*/
}