@media-query

facebook-svg gplus-svg twitter-svg

Antes de llegar a hablar de @media-query, tenemos que hablar de viewport ( ventana de visualización ) y breakpoints ( puntos de discontinuidad ).

Viewport ( la ventana de visualización )

Un sitio web optimizado para móviles puede tener en su <head> el metatag viewport. El viewport controla el tamaño de la ventana de visualización.

En este caso la anchura de la ventana de visualización ( name="viewport" ) es igual al tamaño de pantalla ( device-width ) – exactamente lo que necesitamos para un diseño de página adaptativo. Existe también un equivalente para la altura de la ventana de visualización ( height=device-height ), y también puede recibir valores en pixeles ( width=600px ) aunque no sea muy recomendable.

Más información sobre el viewport metatag

Breakpoints ( los puntos de discontinuidad )

Para construir una web adaptativa, necesitaremos establecer unos puntos donde la estructura de nuestra página web cambiará – a veces de manera dramática – para adaptarse a diferentes tamaños de pantalla. Estos puntos de discontinuidad llevan el nombre ( en inglés ) de breakpoints.
Cada uno de nosotros estableceremos nuestros puntos de discontinuidad según lo que queremos conseguir, pero podemos utilizar como punto de referencia la siguiente tabla, que es solo una burda aproximación a la gran variedad de tamaños de pantalla.

  vertical apaisado
teléfono movil 320px 480px
táblet pequeño 600px 800px
táblet 768px 1024px
sobremesa y moviles >1224px -
pantallas grandes >1824px -

Clarificación: en la tabla anterior aparece la altura o anchura de la área de representación ( device width / height ), y no la resolución de pantalla.

Incluso siendo una burda aproximación a la gran variedad de tamaños de pantalla, esta tabla generaría demasiados puntos de discontinuidad.

¿Qué hacen los demás?

La celebre infraestructura digital ( framework ) foundation de zurb utiliza un solo punto de discontinuidad, normalmente a los 768px, pero el usuario puede definir su propio punto de discontinuidad.

Otra celebre infraestructura digital ( framework ) bootstrap ( desarrollada por twitter – sí, ¡los del pajarito! ) utilizan cuatro puntos de discontinuidad, normalmente a los 480px ( sin @media-query, ya que es el tamaño por defecto en bootstrap ), 768px, 992px, y por fin 1200px.

También podemos echar una miradita a mediaqueri.es para sacar todavía más ideas.

@media queries

En el CSS2 ya podíamos tener varias hojas de estilos para diferentes tipos de medios (media types):

Con la llegada de CSS3 podemos utilizar este mismo atributo ( media ) para referirnos a tamaños específicos de pantalla.



                                     

Pero hay una manera mejor de hacer esto, que nos permite ponerlo todo en una sola hoja de estilos. Podemos utilizar bloques de código @media para incrustar nuestras media queries directamente en el CSS.

Un poco de sintaxis

@media only screen and (max-width: 768px) {.../* los estilos */}

  • 1) Un bloque de media queries empieza siempre por @media
  • 2) Puede seguir o no un operador lógico (only | not).
    El operador lógico not, obviamente niega todo lo que sigue.
    En lo que concierne la palabra only (solamente), los navegadores antiguos, los que no están capaces de procesar los @media bloques, no entienden esta palabra e ignoran todo el bloque de código, sin perder el tiempo tratando de procesarlo.
  • 3) Sigue el tipo de medio (media type), normalmente screen. Tambien esto es opcional. Si no lo ponemos, el navegador entendra que se trata de all (para todos los medios )
  • 4) Puede seguir o no otro operador lógico (and | not).
  • 5) Sigue lo más importante si queremos un diseño de página adaptativo:
    dentro de paréntesis una función multimedia, precedida o no por un prefijo: (prefijo-término:valor).
  • 6) Opcional pueden repetirse los pasos 4 y 5 (para otra funcion multimedia.)
  • 7) Después de una coma ( , ) pueden repetirse todos los pasos de 2 a 6.

Por ejemplo: si queremos crear una página adaptativa con dos puntos de discontinuidad a los 768px y a los 480px podemos escribir los siguientes bloques @media:
Un primer bloque, que abarcará los estilos para pantallas pequeñas (de hasta 480px de anchas como iPhone).

@media only screen and (max-width:480px) {…}

y este otro bloque @media para pantallas medianas (como los táblets) entre 481px y 768px.

@media only screen and (max-width:768px) and (min-width:481px) {…}

Utilizaremos min-width de 481px para no solaparnos (ni tan solo un píxel) con los estilos del bloque anterior.