Mediaqueries

Profesores:JAB y Ester Torres

Múltiples resoluciones

Los llamados media queries son una serie de funciones que incorpora CSS3 para que las páginas web se adapten "racionalmente" o adopten una maquetación diferente según la resolución en la que se muestre la página web, ya sea en navegadores que funcionan sobre ordenadores con grandes monitores, sobre tablets, móviles o incluso displays de neveras, yogurteras, coches o lavadoras conectadas a Internet.

En la actualidad existe una muy amplia variedad de resoluciones de pantalla, pertenecientes a tablets, móviles y otros dispositivos. Por ello es conveniente adoptar una serie de estándares que abarquen las resoluciones más habituales:

Hace algunos años era mucho más fácil controlar las resoluciones para los diferentes medios, -por ejemplo- la resolución habitual para un móvil era de 320 píxeles en modo horizontal y 480 en modo vertical. Actualmente existen móviles que tienen resoluciones equiparables a tablets y a pequeños portátiles. Por ello, para intentar agrupar resoluciones en grupos estándares, podemos utilizar los siguientes grupos:


¿Dónde colocarlos?

Como habitualmente cada página html tiene su propia estructura y necesita de una adaptación personalizada, este código CSS se suele añadir en el <style> del <head>, dentro de la propia página html, aunque siempre al final, siempre justo antes de cerrar la etiqueta </style>.

<head>	
  <style type="text/css">

   body{
      background-color:white;
      font-size:14px;
   }	

   #bloque1{
      font-size:15px;
   }

   @media only screen and (max-width:320px){
    body{
      background-color:red;
    }
    #bloque1{
      font-size:12px;
    }
  }
  </style>
</head>

Primero colocamos todos los selectores habituales de la página, ya sea dentro del <head> o bien dentro un archivo CSS externo.








Después de todos los selectores CSS habituales se colocan los mediaqueries con sus selectores CSS dentro.

Funcionamiento de las Mediaqueries

Un mediaquerie agrupa diferentes selectores CSS e identifica en qué condiciones se deben ejecutar dichos selectores. Normalmente estas condiciones están relacionadas con la resolución horizontal del dispositivo donde se está visualizando la página web.

En el código del ejemplo anterior: (@media only screen and (max-width:320px){), se indica que si la resolución horizontal (width) es menor que (max) 320 píxeles se modificará el color de fondo del <body> por rojo y el texto del <div> con id="bloque1" será de 12 píxeles. Si no se cumple esta condición se habrán ejecutado los primeros selectores CSS que indican un color de fondo blanco y un tamaño de fuente de 14px.


Sintaxis

Tenemos diferentes posibilidades:
@media only screen and (max-width:320px){
  <!--Este mediaquerie se ejecutará sólo cuando la resolución horizontal sea menor de 320 píxeles-->
}

@media only screen and (min-width:980px){
  <!--Este mediaquerie se ejecutará sólo cuando la resolución horizontal sea mayor de 980 píxeles-->
}
El primer parámetro seleccionado en rojo tiene dos posibilidades: También se pueden combinar dos rángos para ajustar todavía más un rango de resolución.
@media only screen and (min-width:320px) and (max-width:480px){
  <!--Se ejecutará sólo cuando la resolución horizontal se encuentre entre 320 y 480 píxeles-->
}


Exclusivo para móviles y tablets

En un móvil no tenemos una ventana del navegador que podamos redimensionar como ocurre con un ordenador, sino que toda la pantalla del móvil es utilizada como ventana del navegador.

Además -como norma general- cuando se visualiza una página web en un móvil el contenido se escala para mostrarlo al completo, por lo que generalmente la página se muestra muy pequeña.

Para evitar estos dos problemas tenemos dos soluciones:

@media only screen and (min-device-width:320px) and (max-device-width:480px){
  <!--Se ejecutará sólo cuando la resolución horizontal se encuentre entre 320 y 480 píxeles-->
}
Añadiendo device podemos hacer referencia -no al ancho de la ventana del navegador (que no existe como tal)- sino a la anchura real del dispositivo.

Para que el contenido no se escale automáticamente al visualizar una página web debemos utilizar un metadata que colocaremos dentro del <head> para configurar el viewport con varias propiedades y que únicamente funcionará para móviles y tablets:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
Con width=device-width indicamos que el contenido se adapte a la resolución horizontal real de nuestro dispositivo (no a la ventana ficticia del navegador).

Al mismo tiempo con initial-scale=1 estamos configurando la escala inicial de visualización. Así, utilizando un valor de "1", el contenido se verá al 100% del tamaño (con "2" la escala inicial sería el doble, pudiéndose utilizar decimales "0.75", "1.25"...)

Por último, podemos indicar el máximo grado de zoom que podrá hacer el usuario utilizando maximum-scale=2. En este ejemplo, con un valor de "2", se permite al usuario ampliar el contenido como máximo el doble de su tamaño original.

Por el contrario, si queremos que el usuario no pueda empequeñecer más del tamaño original el contenido podemos añadir la propiedad minimum-scale=1.


Ejemplos del mismo contenido con el 'uso' o 'no uso' de mediaqueries y viewport:

Sin mediaqueries
Sin viewport

Una página web sin mediaqueries ni metadata name="viewport" se escala automáticamente para que se pueda visualizar entera, por lo que todo el contenido se reduce inicialmente, incluso aunque el contenido pueda caber perfectamente en la resolución horizontal del dispositivo.

Ver ejemplo (sólo en móviles)
Con mediaqueries sin device
Sin viewport

Una web que utiliza mediaqueries sin utilizar 'device' (max-device-width) / (min-device-width), y sobre todo tampoco usa viewport, se visualiza exactamente igual que si no tuviera nada, ya que sin viewport, utilizar los mediqueries sin 'device' en móviles y tablets carecen de utilidad.

Ver ejemplo (sólo en móviles)
Con mediaqueries con device
Sin viewport

Si incorporamos mediaqueries con el prefijo 'device' (max-device-width / min-device-width) pero sin el metadata viewport, los mediaqueries funcionan correctamente, pero visualizando la página de entrada a una escala muy reducida para permitir la visualización entera del contenido.

Ver ejemplo (sólo en móviles)
Con mediaqueries con/sin device
Con viewport

Para que los mediaqueries funcionen correctamente es imprescindible la utilización del metadata "viewport" con las propiedades correspondientes ('width=device-width' e 'initial-scale=1'), sin importar demasiado el uso o no del complemento 'device' en los mediaqueries.

Ver ejemplo (sólo en móviles)