Estilos según la orientación del dispositivo en CSS - Tutorial de CSS

antes de comenzar, por favor, abre los archivos 'base.css', 'tablet.css' e 'index.html' de tu carpeta donde se encuentran los archivos de apoyo. En el archivo 'base.css', podrás ver que están importadas ya todas las hojas de estilo que estaremos usando. Vamos al archivo 'tablet.css'. "Media query" también me permite detectar la orientación del dispositivo, es decir, yo puedo detectar si mi dispositivo está acostado o horizontal o "landscape", que significa lo mismo, o si este está de manera vertical o "portrait". Para poder detectarlo, lo único que tengo que hacer es escribir una nueva regla y, en este caso, vamos a escribirla justo debajo del código que ya existe dentro de 'tablet.css'. Escribamos ahora, después del arroba, con el selector 'media all and', y aquí, en lugar de que nosotros vayamos a definir el tamaño de una pantalla, vamos a trabajar con la orientación, utilizando la palabra reservada 'orientation'. Aquí, utilizando el símbolo de asignación de dos puntos, vamos a indicarle el valor 'landscape'. A partir de ahora, ya puedo definir cuáles van a ser las reglas que estaremos ocupando cuando nos encontremos en un modo 'landscape'. Y trabajar con el modo 'portrait' es muy simple también, puesto que, en lugar de la palabra 'landscape', solamente utilizaremos la palabra 'portrait'. Ahora ya podemos escribir aquí nuestro código sin ningún problema. Pero antes vayamos a probar en el navegador. Para esto, por favor, ve al archivo 'index.html'. Si estás trabajando con Sublime Text, da clic derecho y selecciona la opción Abrir en navegador u Open in Browser. De lo contrario, da un clic directamente sobre tu archivo para que este se pueda abrir. Ahora que ya tenemos nuestro archivo abierto, puedes dar clic derecho y seleccionar la opción que dice Inspeccionar o Inspect Element. Aquí, por favor, activa el modo de dispositivo para que podamos trabajar entre los elementos y selecciona algún dispositivo de tableta. En este caso, tenemos seleccionado el modo iPad. Si tú ves que en tu navegador hay algunos controles que no estás viendo como los ves ahora mismo, por favor, da clic derecho en este botón y activa los que necesites. Muchos de ellos te ayudarán para trabajar con pixel radio o tipo de dispositivo o configurar la velocidad de Internet para poder simular comportamientos y, en este caso, también trabajar con "media queries". Estos "media queries", a través de ciertas barras, nos ayudan a identificar el tamaño y el dispositivo donde se está mostrando mi estilo. Y vamos a tener aquí este ícono, donde me aparecen como unas flechas girando que me servirá para rotarlo. Cuando yo le doy un clic, vemos como mi pantalla rota. Regresemos a nuestro código y en el archivo 'tablet.css', dentro de 'landscape', vamos a utilizar el estilo 'flex-flow: row', es decir, como estamos trabajando aquí con Flexbox para poder acomodar todos los componentes en pantalla, simplemente voy a definir que ahora todos estén en un modo renglón. Y cuando esté trabajando yo en un modo de 'portrait', vamos a definir que se esté trabajando en un modo columna. ¿Qué quiere decir? Que si tenemos espacios a los lados por estar en un entorno de 'landscape' u horizontal, entonces tengo espacio para mostrar algunas cosas, pero tengo que acomodarlo todo en un modo de renglón. De lo contrario, si mi disposición del dispositivo es de manera vertical, entonces simplemente cambio que el flujo del Flexbox sea a columnas. ¿Para qué? para que los componentes me aparezcan de arriba abajo. Y aquí estamos activando nosotros el 'sidebar' para que se despliegue 'inline'. Es decir, como es una lista, en lugar de que esa lista se esté mostrando hacia abajo de una manera convencional, simplemente se va a mostrar como un modo menú. Vamos a probar nuestro código. Actualizamos nuestro navegador y vamos a ver como ahora el menú que teníamos de este lado ya nos aparece en la parte de arriba. ¿Por que? Porque recordemos que nosotros primero pusimos el 'flex-flow: column'. Es decir, va a estar tratando todo de una sola columna. Cuando pulsamos el botón de rotar, vemos como los componentes regresan a su estado normal, porque estamos trabajando a través de una regla, o "row" en inglés. Entonces, de esta manera, yo estoy cambiando la disposición de los elementos y poniendo algunos que estén visibles o no visibles. Es decir, si tú en algún otro "media query" desactivaste u ocultaste algún componente con otro "media query" posterior, puedes volver a activarlo siempre y cuando las condiciones se cumplan. Ahora nos hemos dado cuenta de cómo podemos trabajar con la orientación utilizando "media queries".