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.<meta name="viewport" content="width=device-width">
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
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.
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
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 ),
( 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.
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):<link href="estilos.css" rel="stylesheet" media="screen">
Con la llegada de
CSS3 podemos utilizar este mismo atributo ( media ) para referirnos a tamaños específicos de pantalla.<link href="estilos.css" rel="stylesheet" media="only screen and (max-width: 768px)">
<!-- media="solo pantalla y (anchura maxima:768px)" -->
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- 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
Un primer bloque, que abarcará los estilos para pantallas pequeñas (de hasta
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.
0 Comentarios