Breaking

Post Top Ad

Your Ad Spot

miércoles, 13 de noviembre de 2019

@media-query CSS

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 metatagstar

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.
 verticalapaisado
teléfono movil320px480px
táblet pequeño600px800px
táblet768px1024px
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 zurbstar 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 ) bootstrapstar ( desarrollada por twitterstar – 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 bootstrapstar ), 768px992px, y por fin 1200px.
También podemos echar una miradita a mediaqueri.esstar 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 multimediastar, 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 discontinuidadstar 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.

No hay comentarios.:

Publicar un comentario

Post Top Ad

Your Ad Spot

Páginas