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:
- Resoluciones iguales o menores de 480 píxeles: para móviles
- Resoluciones de 481px a 768 píxeles: para tablets
- Resoluciones mayores de 768 píxeles: para ordenadores
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:
- max-width: Equivale a la traducción "cuando la resolución horizontal sea menor que la indicada...".
- min-width: Equivale a la traducción "cuando la resolución horizontal sea mayor que la indicada...".
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)