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