Hablemos de el uso de media queries en CSS3

css3-media-querieEl concepto de media queries lo podemos definir en español como “consulta a medios”, y eso es lo que realmente trabajamos con esta funcionalidad de css3. Hoy en día vemos la gran evolución de la comunicación, en especial la web, últimamente se ha incrementado de una manera considerable la manera en que personas acceden a la web, hoy se puede acceder desde televisores, computadores, celulares, tabletas e incluso consolas de videojuegos. Lo que se convierte en un reto para el diseñador o desarrollador web, hacer que la web se visualice bien en los diferentes dispositivos y diferentes resoluciones de pantalla, desde un Smartphone hasta un televisor de gran resolución.

Esto lo podemos resolver gracias a los media queries, que nos permiten personalizar los estilos basándonos en las características del dispositivo del visitante de nuestra web.

Soporte de media queries en los diferentes navegadores.

css3 en los diferentes navegadores

Visualización de un diseño web utilizando media queries

css3-queries

Pero veamos cómo podemos añadir esos estilos condicionales y la consulta queries que si se da la condición desatara dichos estilos.

Una de las formas para hacer esto es añadiendo la regla dentro de nuestro css principal o también creando una hoja independiente y luego adjuntarla. Veamos la regla condicional que en caso de cumplirse ejecutara ciertos estilos css.

Analicemos la sintaxis de la ccs media querie.

css3-media-queries

Lo que en este caso debemos de tener presente es la función o condicional que al cumplirse desatara y ejecuta el css preparado para el dispositivo en cuestión.

En el caso anterior era max-widht:600px, es decir cualquier persona que habrá la web desde un dispositvo que la resolución sea menor de 600px automáticamente ejecutara el css que está en su cuerpo. Ahora, hay muchas más opciones de condicionales que funcionan con media queries, y es lo que denominamos los Media features, miremos cuales podemos utilizar para ejecutar css condicionales.

1 – width

media queries que funcionara si la web se abre en un dispositivo entre los rangos de 400 y 700 px. max-widht es el acho maximo y min-width el ancho minimo.

2 – height

Con esta función especificamos la altura de visualización del dispositivo, acepta los prefijos min/max.

3 – device-width

Especificamos el ancho del área de representación, la anchura de la hoja web, acepta los prefijos min/max.

4 – device-height

Especificamos la altura del área de representación, la altura de la hoja web, acepta los prefijos min/max.

5 – orientation

Especificamos la Orientación del dispositivo, podemos tener como valores portrait o landscape.

La orientación es portrait cuando el media feature width es igual o mayor a la media feature height, de lo contrario la orientación es landscape.

6 – aspect-ratio

Especificamos la relación del dispositivo entre la media feature width y la media feature height, acepta los prefijos min/max.

7 – device-aspect-ratio

Especificamos la relación del dispositivo entre la media feature device-width y la media feature device-height, acepta los prefijos min/max.

8 – color

especificamos el numero de bits por componentes del color,

La anterior media queries aplica para los dispositivos con 2 o más bits como componentes de color, acepta los prefijos min/max.

9 – color-index

Con esto especificamos el número de entradas en la tabla de conversión de color del dispositivo de salida, si el dispositivo no utiliza una tabla de conversión de color, su valor será cero, acepta los prefijos min/max.

10 – monochrome

Básicamente con esta función especificamos que el dispositivo es a blanco y negro, y lo especificamos por el número de bits por pixel, acepta los prefijos min/max.

En el anterior código especificamos 2 maneras de aplicar los css especiales por media queries a todos los dispositivos monochrome es decir a blanco y negro.

11 – resolution

Especificamos la densidad de pixeles de un dispositivo de salida, acepta los prefijos min/max.

Por ejemplo en el código anterior especificamos los css para los dispositivos con una resolución mínima de 300 ppp “puntos por pulgadas”

12 – scan

Especificamos los css para los procesos de escaneados utilizados por los dispositivos de salida de televisión, los valores pueden ser progressive o interlace.

———————-

En resumen.

En css 2.1 utilizamos los media types screen y print para aplicar estilos diferentes a la web, ahora en CSS3 tenemos la opción de Media queries, que es mucho más abundante en funcionalidades, ya que nos va a permitir crear estilos css alternos para los diferentes dispositivos que pueden conectarse a internet y visualizar una web, ya no hay motivos para no hacer que nuestra web se vea bien en todas las pantallas.

Para más información sobre este tema: http://www.w3.org/TR/css3-mediaqueries/


 

About the author

Johan Ricardo Niebles. Administrador y creador de este blog, Front-end (HTML + CSS + JS).con mas de 4 años de experiencia en el magico mundo web. Johan Ricardo