Media

Con media conseguiremos cambiar rápidamente como se muestra el contenido de nuestra página según el medio con el que lo vemos.

Una de las formas más efectivas de hacer una página responsiva (sensible a el tamaño de la pantalla) es usar la función @media dentro de CSS (también se puede usar desde HTML, pero es más cómodo de esta forma).

Cuando declaramos un elemento @media podemos especificar para que medio se mostrará y además decirle que condiciones tiene que cumplir el medio (es decir, si la pantalla que ve nuestra página tiene menor resolución de la esperada, según los tamaños de nuestra página, podremos cambiar la forma de mostrar los elementos para que puedan adaptarse al tamaño de la pantalla), por ejemplo: si tenemos una cabecera de 1000px y lo ve el usuario con una pantalla de 600px se mostrara de una forma distinta, como podría ser mostrando los elementos unos encima de otros (como el menú de Xitrus).
Además esta función de CSS es compatible con todos los navegadores.

En Xitrus gran parte de los elementos son responsivos, y funcionan con el uso de @media:

• El menú en tamaños de pantalla pequeños pasa a tener los elementos uno debajo de otros, y en tamaños muy pequeños cambia su sitio.
• El bloque lateral derecho con el fondo gris cuando se diminuye el tamaño de pantalla pasa al final del contenedor principal, al final del texto.
• El tamaño del texto aumenta con tamaños de pantalla muy pequeños.
• Todos los textos se adaptan, igual que los formularios e imágenes.
• Los bloques de contenido de la página de inicio cambian considerablemente según el tamaño de la ventana.
• Realmente todo esta echo lo mejor posible para que se adapte a todos los dispositivos, como Smartphones y Tablets.

Nota: se puede probar todo haciendo la ventana del navegador más pequeña

Como usarlo

para usar @media debemos de ponerlo, preferentemente al final de la página, y usarlo de forma separada a los estilos, escribiendo el @media, depues las condiciones que tiene que cumplir para que entre en uso y después abrimos y cerramos llaves para poner los estilos que entran en uso.

Un ejemplo:

1. @media screen and (max-width: 600px){

div{


width:100%;


height:auto;


margin-left:10px;


}


2. }

En el anterior ejemplo @media hace que cuando se vea desde una pantalla y el ancho sea inferior a 600px (desde 0px asta el máximo de 600px) todos los elementos DIV cojan el estilo definido dentro de @media.

Los distintos medios

En las condiciones que le establecemos a @media podemos optar por distintos medios en lo que se muestra, como un televisor, una impresora...
Los distintos tipos:

• All: esta condición engloba a todos los medios.
• Braille: este es un medio especial para dispositivos táctiles adaptados para discapacitados visuales.
• Embossed: es usado para impresoras braile.
• handheld: es para dispositivos portátiles (con pantalla pequeña), como teléfonos móviles.
• print: es usado para medios impresos.
• projection: es usado para proyectores.
• screen: este es el usado comúnmente, que es para la pantalla del pc.
• speech: usado para sintetizadores de voz.
• tty: usado cuando se muestra la web en un terminal o consola (en modo texto).
• tv: Se usa cuando el medio es un televisor.

media queries

Las media queries son una novedad de @media, que nos deja tener mas factores en cuanta (que antes solo se podían saber con JavaScript a la hora de usar unos estilos u otros, y se pueden usar varias condiciones a la vez, lo que hace más cómodo de ser usado.

Para usar varios factores en @media los tenemos que separar con and y meterlo entre paréntesis, por ejemplo:

1. @media screen and (max-width: 600px) and (min-width: 300px){
2. }

Existe una lista de parámetros, pero los más importantes son los siguientes:

• Width y Height: también se pueden usar con max- y min-, tiene en cuenta el tamaño de pantalla para mostrar de una forma u otra el contenido.
• Aspect-ratio: tiene en cuenta la disposición de pantalla, por ejemplo panorámicas (16:9).
• Resolution: comprueba la resolución de la pantalla y la densidad de pixeles por pulgada, y es útil para crear webs especificas para pantallas de alta resolución.
• Color, Color-index y Monochrome: nos muestra el numero de bits de color o si es monocromática la pantalla, siendo útil para hacer un diseño especifico, por ejemplo, para E-books.

Comentarios