@media-query
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.