Guías de uso de las Media Queries en Responsive Web Design

  • Por
Vamos a conocer muchas de las técnicas relacionadas con las media queries que puedes aplicar para sitios que se adapten a todo tipo de pantallas y medios.

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

Nota: Aunque es un conocimiento básico, lo aclaramos por si acaso. La cascada en CSS es aquella manera de procesar los estilos que produce que se puedan sobrescribir. Osea, si en un punto de tu hoja de estilos defines un CSS para un elemento y más adelante en el código CSS lo sobreescribes colocando cualquier otro valor en ese estilo, el que se tiene en cuenta es el que se definió por último lugar (a menos que uses "important" en la primera regla). En resumen, si dos valores en atributos de CSS se contradicen, por la regla de la cascada, el que se tiene en cuenta es el que se colocó por último lugar.

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.

Nota: Esta guía, basada en la filosofía Mobile First, es la que pone en práctica la mayoría de los diseñadores, por considerarse más útil y versátil. Lógicamente tú podrías aplicar la filosofía que te venga en gana, siempre y cuando sigas la regla de la cascada, que es la que verdaderamente te marca el lenguaje CSS.

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.

Nota: Recuerda que cuando decimos anchura generalmente queremos referirnos a anchura o altura. Generalmente las media queries se aplican a la anchura, pero también las puedes aplicar a la altura, min-height, max-height. Recuerda también que con media queries puedes especificar si se aplican a dispositivos que estén posicionados en horizontal o en vertical (landscape o portrait). Todo eso se mencionó en el anterior artículo de las media queries.

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.

Autor

Miguel Angel Alvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Compartir

Comentarios

Marcelo Altair

04/3/2015
Pedazo artículo
Felicidades Miguel, con todo esto ya tenemos para trabajar bastante. Sois los mejores! Ya hice mi donación.

Gemma Lara

04/3/2015
Breakpoints más adecuados
No habéis comentado nada sobre los breakpoints más adecuados para implementar en nuestras mediaqueries.

Luis

05/3/2015
Realmente no hay breakpoints recomendados
Hola,
Justamente es lo que no demos hacer, guiarnos por breakpoints "estándar" que optimicen para determinados dispositivos. En realidad es tu diseño el que debe definir el punto donde crear esos breakpoints.

Rafel

21/4/2017
Media queries no soportadas
Según lo dicho diseñamos un sitio teniendo en cuenta la filosofía Mobile First y Progressive Enhancement. De esta forma definimos unas reglas CSS globales ,que afectan a todos los dispositivos, teniendo en cuenta que así se verá en los dispoitivos con pantallas pequeñas y luego ponemos media queries para dispositivos con pantallas de mayor tamaño. Que pasa cuando alguien accede a nuestro sitio con un ordenador con pantalla grande pero con un navegador que no soporta las media queries? Se ve el sitio como si se tratase de un móvil? Como tenemos en cuenta esto a la hora de escribir nuestros estilos?