En el Manual de Responsive Web Design de DesarrolloWeb.com hemos abordado ya muchos asuntos importantes y en concreto en el caso de las Media Queries las hemos analizado desde un punto de vista técnico, centrándonos en la sintaxis de las CSS para Media Queries. Ha sido genial, porque ya sabemos muchas cosas que podemos realizar gracias a las Media Queries y cómo implementarlas a nivel de código CSS.

No obstante sobre todo para las personas que se están iniciando hay muchas cosas que les arrojarán dudas o problemas y que vamos a intentar resolver en el presente artículo. Por tanto, estás ante un texto menos técnico pero lleno de consejos y guías para que puedas aplicarlo en tus diseños adaptables.

Configurar un buen Viewport

El viewport es una definición o declaración sobre diferentes parámetros de la visualización de una página web, que afecta sobre todo a los dispositivos. Se trata de una etiqueta META a través de la cual se puede definir si el usuario puede o no hacer zoom en la página, qué zoom inicial debe aplicarse al entrar, la anchura que debe simular la pantalla del dispositivo. Es algo largo de contar, si se quiere explicar bien, por lo que te recomendamos leer el artículo dedicado al Viewport para encontrar la información detallada.

De momento te puedes quedar con que el Viewport sirve para que la página no se muestre en pequeñito en el dispositivo (Habrás apreciado que cuando entras en un sitio que no es "responsive" se ve todo muy pequeño). Cuando trabajas con un sitio adaptable tienes que obligar al dispositivo a no simular que tiene más anchura de pantalla de la que realmente tiene y para ello tienes que definir un viewport adecuado.

Es un fallo común cuando estás empezando es no tener un viewport definido. El síntoma es que tu página no te está aceptando las media queries que estás definiendo. Si te pasa eso no te vuelvas loco y define un viewport adecuado. Consulta el artículo mencionado para encontrar la información completa sobre cómo se define.

El orden de colocación de los mediaqueries

Orden de las mediaqueries es importante y por tanto debes tener cuidado con ello. Para entender cómo ordenar tus media queries tienes que tener en cuenta dos cosas:

1. La cascada que, a nivel de CSS, afecta a todas las reglas de estilo
2. La regla comentada anteriormente que llamamos Mobile First

Así pues, el orden que se usa normalmente para las media quieries (MQ) es:

1. Colocar todos los estilos a aplicar de manera global, fuera de cualquier MQ. Los estilos que coloques sin MQ serán como "MQ globales" que afectarán a todos los dispositivos, con todas las anchuras de pantalla. Por la regla del Mobile First, las configuraciones que pondrás en tu CSS global (ausencia de MQ) serán las que se apliquen a los móviles, osea, a los dispositivos con menor anchura de pantalla. (Ver aclaración más abajo)
2. Luego colocarás, como primer MQ, el estilo necesario para los dispositivos de la siguiente anchura de pantalla que necesites.
3. Irás colocando los MQ en orden de anchuras de pantalla ascendentes. Terminarás siempre por el MQ que coloques para las anchuras de pantalla mayores, ordenadores con pantallas de alta resolución.

Rangos de media queries

Puedes perfectamente especificar rangos de media queries. Para ello usas min-width y max-width a la vez. Quizás no es algo muy habitual, pero lo mencionamos por si tuvieras necesidad de ello. La sintaxis sería la siguiente:

@media (min-width: 700px) and (max-width: 800px){
	.lateral{
		width: 33%;
		float: right;
		background-color: #6ee;
	}
}

Esos estilos para la clase "lateral" los visualizarías en anchuras de pantalla que cumplan las dos condiciones a la vez, osea, que su anchura mínima sean 700 píxeles y las anchura máxima sea 800 píxeles. Es decir, el rango de 101 píxeles que van desde los 700 hasta los 800 pixel.

Anchura de la pantalla del dispositivo

Hasta ahora hemos definido los media queries con respecto a una anchura de la pantalla que puedas tener en un momento dado, pero también puedes definirlas para la anchura total de la pantalla, independientemente de la configuración actual. Lo consigues con max-device-width y min-device-width y no afectan a la anchura de la pantalla actual, sino a la del dispositivo.

Aclaración sobre las "Media Queries globales"

Antes hemos comentado acerca de "media queries globales". Este es un concepto "verdad a medias", puesto que no existen mediaqueries globales, que afecten a todas las resoluciones pantalla y todos los tipos de dispositivos. Pero si lo analizas más de cerca observarás que, si no existe ninguna media querie definida en tus CSS, entonces tus reglas de estilo estarán siendo aplicadas de manera global. Dicho de otro modo, cuando no defines ningún media querie en realidad estás definiendo estilos CSS que afectan a todos los posibles estados, pantallas, medios, dispositivos, etc.

Esa ausencia de Media Queries es justamente tu declaración "global", aplicable en todos los contextos, que afecta a todos los sistemas.

Conclusión

Con todo este conocimiento ya estás en condiciones de ponerte manos a la obra y aplicar media queries a tu diseño web y adaptarlo a tus necesidades. Hay muchas cosas por delante que conocer para aprovechar las posibilidades del Responsive Web Design, pero estamos seguros que podrás aplicar un montón de utilidades para adaptar todo tipo de sitios a todo tipo de pantallas. Seguro que disfrutarás de la experiencia. Seguiremos trabajando para llevarte muchos otros conocimientos y técnicas esenciales para el diseño web.