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
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 bootstrap768px
, 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):<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, 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
Un primer bloque, que abarcarƔ los estilos para pantallas pequeƱas (de hasta
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.
No hay comentarios.:
Publicar un comentario