Media queries como base del responsive design

Media queries como base del responsive design

Está de moda y es el futuro. Toda web de nueva factura tiene que estar maquetada siguiendo los principios del responsive design.

Cuando el responsive design empezó a utilizarse, muchos lo vieron con ojos nuevos, otros lo confundían con el diseño líquido y otros tantos lo vieron como una evolución del diseño líquido (entre los que me incluyo, aunque no al 100%).

De una forma u otra, un diseño adaptable se basa en cambiar la apariencia de la web (tanto el contenido como su distribución) en función del dispositivo desde el cual se accede. No se debe confundir con tener una versión de la página para cada dispositivo, sino que con la misma maquetación HTML y con el mismo código CSS asociado, el diseño varía en función del dispositivo.

Y es aquí donde entran las media queries. El concepto no es 100% nuevo de CSS3, sino que tiene su punto de partida en los media types.

Antes de “entrar en materia”, como siempre la versión en vídeo del artículo:

¿Qué es un media type?

Los media types permiten indicar una serie de estilos que se aplicarán según el tipo del medio, en algunas páginas, al ver el código fuente, nos encontramos algo como lo siguiente en su head:

<link rel="stylesheet" type="text/css" media="all" href="style.css">
<link rel="stylesheet" type="text/css" media="print" href="print.css">

En ese ejemplo, se incluye una hoja de estilos llamada style.css siempre (media=”all”), pero existe una hoja de estilos llamada print.css que sólo se ejecutará cuando se esté imprimiendo el documento (media=”print”).

Los media types más típicos son:

  • all: para todo (valor por defecto).
  • print: en la vista previa de impresión y a la hora de imprimir.
  • screen: para las pantallas de ordenador.
  • tv: para televisores.

Su uso más habitual se limitaba a “all” y “print”.

Las media queries entran en juego

Las media queries son propias de CSS3 y vienen a extender a los media, utilizando un media type con una serie de expresiones relacionadas con las características del dispositivo desde el cual se accede a la web. Las media queries dan como resultado verdadero o falso. Si el resultado es verdadero, se leen las reglas CSS de su interior, si es falso no.

Ejemplo:

@media (max-width: 600px) {

}

Este sencillo ejemplo tiene una media query que significa lo siguiente:
Cuando el ancho de la pantalla tenga un ancho menor a 600px lees el código encerrado dentro de las llaves que abren y cierran la media querie.

Por lo tanto este CSS:

body {
	background: green;
}

@media (max-width: 600px) {
	body {
		background: red;
	}
}

Hará que el fondo de la web sea verde, pero cuando la pantalla sea menor a 600px el fondo será rojo.

Incluimos la hoja de estilos a un documento HTML y vemos su resultado:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<link rel="stylesheet" type="text/css" media="all" href="style.css">
	</head>
	<body>
 
	</body>
</html>

Pantalla fondo verde con el navegador maximizado

fondo verde con el navegador maximizado

Media queries para cambiar el fondo para ventanas con un ancho menor de 600px

Media queries para cambiar el fondo para ventanas con un ancho menor de 600px

Las Media queries se componen de un media type y una o mas expresiones, implicando características del medio, la cual se resuelve como verdadera o falsa. El resultado de la consulta es verdadera si el tipo de medio especificado en el media query concuerda con el tipo de dispositivo que está siendo mostrado y todas las expresiones en el media query son verdaderas.

Principales expresiones a utilizar en las media queries

Al igual que hay varios media types, las media queries tienen varias expresiones a utilizar, las más interesantes para el responsive design son:

  • orientation: permite tomar por valores landscape o portrait lo que significa que la orientación sea horizontal o vertical, o sea, landscape si la ventana es más ancha que alta y portrait si es más alta que ancha.
  • resolution: Permite las variantes min-resolution y max-resolution. El valor que toma es la densidad de la pantalla en valor de puntos por pulgada (dpi) o en puntos por pixel (dppx). Su uso principal es para cambiar los background de imágenes según el dispositivo sea de alta resolución (como los retina display, iphone, …) o normal para que no se carguen más datos de los necesarios.
  • width: El alto del dispositivo. Se permiten las variantes min-width y max-width. Es la principal expresión para el responsive design.

Se puede consultar la lista completa y ampliar la información sobre las media queries en la documentación para desarrolladores de mozilla.

Las media queries como base para el responsive design

Gracias a las media queries podemos cambiar totalmente la vista y distribución de los elementos de la maqueta en función del ancho del dispositivo, pudiendo mostrar u ocultar etiquetas.

Lo que normalmente se hace, es establecer tres o cuatro tamaños límite de pantalla y personalizar las reglas vía media queries. Vamos a hacer un pequeño ejemplo.

Para nuestro ejemplo, utilizaremos el concepto de mobile first, usado en los modernos frameworks CSS responsive design, se basa en preparar primero la vista óptima para el móvil y utilizar las media queries para ir adaptando la maqueta a dispositivos mayores.

Con esta idea en la cabeza, utilizamos la página de ejemplo del último artículo, para hacer que el texto se muestre de la siguiente manera:

  • Vista móvil: 1 columna.
  • Vista tablet: 2 columnas.
  • Vista PC: 3 columnas.

El código HTML será siempre el mismo:

<!DOCTYPE html>
<html>
	<head>
		<title>Texto a tres columnas con HTML5 y CSS3</title>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<link rel="stylesheet" href="./style_responsive.css" type="text/css" media="all">
	</head>
	<body>
		<div class="three-columns">
			<p>
				En un lugar de la Mancha, de cuyo nombre no quiero acordarme, no ha mucho tiempo que vivía un hidalgo de los de lanza en astillero, adarga antigua, rocín flaco y galgo corredor. Una olla de algo más vaca que carnero, salpicón las más noches, duelos y quebrantos los sábados, lantejas los viernes, algún palomino de añadidura los domingos, consumían las tres partes de su hacienda. El resto della concluían sayo de velarte, calzas de velludo para las fiestas, con sus pantuflos de lo mesmo, y los días de entresemana se honraba con su vellorí de lo más fino. Tenía en su casa una ama que pasaba de los cuarenta, y una sobrina que no llegaba a los veinte, y un mozo de campo y plaza, que así ensillaba el rocín como tomaba la podadera. Frisaba la edad de nuestro hidalgo con los cincuenta años; era de complexión recia, seco de carnes, enjuto de rostro, gran madrugador y amigo de la caza. Quieren decir que tenía el sobrenombre de Quijada, o Quesada, que en esto hay alguna diferencia en los autores que deste caso escriben; aunque, por conjeturas verosímiles, se deja entender que se llamaba Quejana. Pero esto importa poco a nuestro cuento; basta que en la narración dél no se salga un punto de la verdad.
			</p>
			<p>
				Es, pues, de saber que este sobredicho hidalgo, los ratos que estaba ocioso, que eran los más del año, se daba a leer libros de caballerías, con tanta afición y gusto, que olvidó casi de todo punto el ejercicio de la caza, y aun la administración de su hacienda. Y llegó a tanto su curiosidad y desatino en esto, que vendió muchas hanegas de tierra de sembradura para comprar libros de caballerías en que leer, y así, llevó a su casa todos cuantos pudo haber dellos; y de todos, ningunos le parecían tan bien como los que compuso el famoso Feliciano de Silva, porque la claridad de su prosa y aquellas entricadas razones suyas le parecían de perlas, y más cuando llegaba a leer aquellos requiebros y cartas de desafíos, donde en muchas partes hallaba escrito: La razón de la sinrazón que a mi razón se hace, de tal manera mi razón enflaquece, que con razón me quejo de la vuestra fermosura. Y también cuando leía: ...los altos cielos que de vuestra divinidad divinamente con las estrellas os fortifican, y os hacen merecedora del merecimiento que merece la vuestra grandeza.
			</p>
		</div>
	</body>
</html>

Media queries para vista móvil

Como estamos siguiendo el principio de mobile first, nuestro CSS base, será el óptimo para móvil, así que nuestro style_responsive.css será así:

* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

html {
	font-size: 62.5%;
	line-height: 1;
}

p {
	font-size: 15px;
	font-size: 1.5rem;
	line-height: 1.333333334;
	margin-bottom: 20px;
	margin-bottom: 2rem;
	text-align: justify;
}

.three-columns {
	margin: 20px;
	margin: 2rem;
}

Con este código, las tres vistas tienen el mismo resultado:

Media queries - Vista móvil

Vista móvil

Media queries - Vista tablet

Vista tablet

Media queries - Vista PC

Vista PC

Media queries para vista tablet

Ya tenemos nuestra web sencilla maquetada de forma que se ve siempre igual. Ahora, vamos a hacer que se muestre a dos columnas si se accede desde un tablet.

Para determinar que se está en “vista tablet”, usamos las media queries para activar la “vista tablet” cuando el ancho de la pantalla sea superior a 600px.

* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

html {
	font-size: 62.5%;
	line-height: 1;
}

p {
	font-size: 15px;
	font-size: 1.5rem;
	line-height: 1.333333334;
	margin-bottom: 20px;
	margin-bottom: 2rem;
	text-align: justify;
}

.three-columns {
	margin: 20px;
	margin: 2rem;
}

@media (min-width: 600px) {
	.three-columns {
		-webkit-column-count: 2; /* Chrome, Safari, Opera */
		-moz-column-count: 2; /* Firefox */
		column-count: 2;
 
		-webkit-column-gap: 40px; /* Chrome, Safari, Opera */
		-moz-column-gap: 40px; /* Firefox */
		column-gap: 40px;
 
		-webkit-column-gap: 4rem; /* Chrome, Safari, Opera */
		-moz-column-gap: 4rem; /* Firefox */
		column-gap: 4rem;

		-webkit-column-rule: 5px solid rgb(75, 180, 149); /* Chrome, Safari, Opera */
		-moz-column-rule: 5px solid rgb(75, 180, 149); /* Firefox */	
		column-rule: 5px solid rgb(75, 180, 149);
 	 
		-webkit-column-rule: 0.5rem solid rgb(75, 180, 149); /* Chrome, Safari, Opera */
		-moz-column-rule: 0.5rem solid rgb(75, 180, 149); /* Firefox */
		column-rule: 0.5rem solid rgb(75, 180, 149);
	}
}

Con este código, la vista de móvil se mantiene, pero la vista tablet cambia colocando el texto a dos columnas, algo que ocurre también en la vista PC.

Media queries - Vista móvil

Vista móvil

Media queries - Vista tablet

Vista tablet

Media queries - Vista PC

Vista PC

¿Por qué funciona?

Las reglas CSS que están fuera de las media queries siempre se leen, de forma que, por ejemplo, la etiqueta .three-columns siempre tiene el margin indicado en el CSS.

Cuando la pantalla tiene un ancho de 600px o más, además de las reglas ya leídas en la vista de móvil, se ejecuta la regla que está dentro de la media query.

De esta manera, además de todo el CSS usado en la “vista móvil”, se leen y ejecutan las reglas que ponen el texto a 2 columnas.

Media queries para vista PC

Para terminar, sólo tenemos que utilizar las media queries para establecer que el texto se mostrará a tres columnas cuando el dispositivo tenga un ancho superior a 900px. Para ello, dejamos el CSS de la siguiente manera:

* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

html {
	font-size: 62.5%;
	line-height: 1;
}

p {
	font-size: 15px;
	font-size: 1.5rem;
	line-height: 1.333333334;
	margin-bottom: 20px;
	margin-bottom: 2rem;
	text-align: justify;
}

.three-columns {
	margin: 20px;
	margin: 2rem;
}

@media (min-width: 600px) {
	.three-columns {
		-webkit-column-count: 2; /* Chrome, Safari, Opera */
		-moz-column-count: 2; /* Firefox */
		column-count: 2;

		-webkit-column-gap: 40px; /* Chrome, Safari, Opera */
		-moz-column-gap: 40px; /* Firefox */
		column-gap: 40px;

		-webkit-column-gap: 4rem; /* Chrome, Safari, Opera */
		-moz-column-gap: 4rem; /* Firefox */
		column-gap: 4rem;

		-webkit-column-rule: 5px solid rgb(75, 180, 149); /* Chrome, Safari, Opera */
		-moz-column-rule: 5px solid rgb(75, 180, 149); /* Firefox */
		column-rule: 5px solid rgb(75, 180, 149);

		-webkit-column-rule: 0.5rem solid rgb(75, 180, 149); /* Chrome, Safari, Opera */
		-moz-column-rule: 0.5rem solid rgb(75, 180, 149); /* Firefox */
		column-rule: 0.5rem solid rgb(75, 180, 149);
	}
}

@media (min-width: 900px) {
	.three-columns {
		-webkit-column-count: 3; /* Chrome, Safari, Opera */
		-moz-column-count: 3; /* Firefox */
		column-count: 3;
	}
}

Y ya tenemos nuestras vistas listas:

Media queries - Vista móvil

Vista móvil

Media queries - Vista tablet

Vista tablet

Media queries - Vista PC

Vista PC

Conclusiones sobre las media queries

Como la finalidad de este artículo es explicar la base, las media queries utilizadas son muy sencillas, pero se pueden complicar para afinar al máximo nuestra maqueta, por ejemplo:

Media queries para pantallas en horizontal con un ancho mínimo de 400px y uno máximo de 600px:

@media (orientation: landscape) and (min-width: 400px) and (max-width: 600px) 
{
} 

Media queries para pantallas horizontales con un ancho mínimo de 400px, máximo de 600px y que sea un dispositivo de alta resolución:

@media (orientation: landscape) and (min-width: 400px) and (max-width: 600px), (min-resolution: 2dppx)
{
}

Las posibilidades y combinaciones son muchas y su uso está generalizado. Bootstrap o Foundation son sólo dos ejemplos de frameworks CSS que basan todo su funcionamiento en las media queries, lo que nos permite tener webs adaptables.

Es más, como se pueden crear aplicaciones híbridas multiplataforma utilizando HTML5, éstas pueden hacer uso de las media queries para facilitar el desarrollo multi-dispositivo, algo que al final es bastante más sencillo que los múltiples layouts en android.

Habilitar media queries en Internet Explorer

Igual estás pensando en lo que conlleva usar media queries y diseñar/maquetar bajo la filosofía de mobile first… claro que sí… Internet Explorer 8 e inferiores no soporta media queries.

Como IE no entiende lo que son las media queries, no va a leer nunca las reglas CSS que están dentro de las media queries… por lo que cuando se acceda desde IE8 o inferior, la web se mostrará como si se viese desde un móvil.

Bueno, si en tu caso es vital el soporte para esas versiones viejas de IE, no pasa nada… viene Javascript al rescate en forma de dos estupendas librerías que emulan el soporte para las media queries en IE5+

¿Alguna excusa más para no usar media queries? Claro que no!!

Recursos disponibles

22 pensamientos en “Media queries como base del responsive design

  1. Hola:
    Gracias por el estupendo artículo, pero yo sí que tengo una excusa más para al menos generarme dudas y son las siguientes:
    Por mucho que busco no veo que las media queries sean capaces de detectar los dispositivos como tales, es decir ¿Que pasa con los dispositivos móviles de alta resolución?, es que ya los hay con más resolución que un pc y no veo por ningún lado de la red que se trate este tema, en mi opinión, o hay algo que no sé, o los frameworks que se basan en la selección del tipo de dispositivo en su resolución, están condenados al fracaso y al final tendremos que usar javascript o php para leer el user agent, que cada v ez se hace más a menudo.
    Saludos: Luis.

    1. Buenas Luis,

      CSS3 sí tiene en cuenta lo que comentas, utilizando en el media-query el valor resolution:

      @media screen and (min-resolution: 300dpi) {
      
      }
      
      @media screen and (min-resolution: 2dppx) {
      
      }
      

      Dónde 1dppx es, aproximadamente, 96dpi.

      saludos

  2. Estupendo artículo. Tengo una duda, a la hora de ir maquetando mi página, si la foto principal de portada, en la versión responsive, me recorta mal, es decir, queda descentrada, podría indicar que a partir de un tamaño de visualización poner otra foto diferente para ese “dispositivo”
    un saludo

  3. Pingback: ¿Qué significa “Responsive” y cómo se sabe si una web o blog lo es? - RadioWeb3punto0.com

  4. Maestro !! en algunas css3 que intento comprender y estudiar utilizan asi para el media queries:

    @media only screen and (min-device-width : 320px) and (max-device-width : 480px){}
    salvando el tema medidas hay diferencias con lo explicado aca, lo consulta un novato que se forma autodidacta..gracias

    1. Buenas! El tema de las media queries es más complejo de lo que parece. El ejemplo que pones indica que se aplica la media query sólo a la pantalla (por ej al imprimir no se aplicaría) y que el ancho del dispositivo esté entre 320 y 480, (no de la ventana dónde se ve la web sino de la pantalla). En este artículo intenté buscar la forma más clara y sencilla de utilizarlas a modo de “puesta en situación”. Si quieres profundizar más o necesitas una sintáxis más compleja en la página de desarrolladores de mozilla que enlazo en el artículo tienes más info.

  5. Veamos,. creo que es dar vueltas siempre a lo mismo.
    La programación “responsive” se ha realizado siempre, de otra manera, sin ese nombre (responsive). Lo que he leido en el artículo es muy interesante, pero no es más que tener una hoja de estilos por defecto y después en función p.ej del ancho, cargar otra con los parametros diferentes para cada caso.

    Se puede hacer incluso con javascript puro y duro.
    Cuando detectas que el screen.availwidth<1024 puedes hacer que el ancho de un elemento varie: document.getElementById("descripcion").style.width=1000;

    ¿cierto o no?

    Otra cosa es que quede más elegante con las media queries.

    1. Buenas, aunque en gran medida puedas tener razón, no es del todo así. Por un lado, estás asumiendo que dónde va a visualizarse tiene JS activado, sí… casi todo el mundo lo tiene, pero hay entornos donde no. Por otro lado, puedes acceder a información como la densidad de la pantalla, de forma que tengas unas imágenes para dispositivos de baja resolución y otras para, por ejemplo, los retina de mac, iphone etc… tener una hoja de estilos exclusiva para imprimir, otra para cuando se vea desde un TV, monitor estandar, etc.

      Si nos ceñimos sólo a tamaños de pantalla con JS puedes apañar, pero con las media-queries accedemos a más info de forma sencilla y rápida.

      saludos!!

  6. Buenas, voy a montar una empresa, quisiera saber cómo y de qué forma seria mejor hacer la web de mi empresa, como mantenerla y como posicionarla, ya que todo es nuevo para mí, hace años hice un curso de diseño de páginas web, pero todo vario.
    Para poder saber, informarme, consejos y como hacerla para que sea más atractiva y según el usuario el soporte que utilice poder entrar en ella.
    Me ha parecido muy interesante el contenido, la información y como ejecutarlos.
    Quiero saber un poco más.
    Muchas Gracias.

  7. Muchas gracias por el aporte, todo va muy bien salvo un gran detalle, las imágenes que coloqué para cada tamaño se superponen una a otra, es decir, la imagen que tengo como principal siempre tiende a colocarse por encima de las demás cuando varía el ancho de la página, ¿cómo corrijo esto?
    Espero me pueda ayudar con esto, muchas gracias por anticipado.

  8. Muy buenas Rolando,

    Gracias por el artículo. Es de mucha utilidad para quienes estamos comenzando.

    Sólo una pregunta. Es posible tener background para el PC y a través de media queries hacer que cambie el background por completo?

    Es decir, mi background en PC no quiero cambiarlo porque además contiene el titulo y logo de la pagina principal. (y me gusta com está …:))

    Pero, cuando paso a iPad (sobretodo en portrait) u otro dispositivo más pequeño, la misma imagen no sería posible adaptarla por ser demasiado ancha. Es por eso que quería cargar 2 o 3 fotos diferentes como backgrounds para cada conjunto dispositivos.

    En caso de ser posible … como debería estar ordenado en CSS?

    No sé si he sido claro. Espero que si.

    Un saludo.

    LG

  9. Excelente rolando.caldas esto es un espectacular articulo… desconocía totalmente Media queries!!! Muchas Gracias a partir de ahora mobile first y de ahi despliego el batallon de @media. Me gustaria que me orientaras un poco mas con referente al tema, ya que como dices es mas complejo de lo que se ve! pero Interesante.

  10. Hola Rolando, muchas gracias por tu excelente post, me ha ayudado a entender mejor cómo funciona el tema responsive. Estoy haciendo una web, y no acabo de conseguir modificar el css de la vista en móvil como a mí me gustaría.

    El problema es que en pantalla móvil (iphone5) la web pasa de mostrar 3 columnas a 1, pero preferiría dos columnas en vez de una, ya que se vuelve demasiado larga para el usuario. Cómo es posible cambiar ésto?

    1. Te recomiendo que realices tu maquetación con bootstrap utiliza la clase .row para tu contenedor y divide cada contenedor que vallas a usar con las clases .col-xs col-sm col-md y col-lag todas esas que nombre se adaptan a todo tipo de pantallas comenzando por dispositivos móviles y según las medidas le colocas las cantidades de celdas a cada contenedor.

    2. Buenas, tal y como comenta Sandy, si lo que buscas no es muy específico (muy ad-hoc) bootstrap es lo que te puede funcionar mejor, porque funciona con un grid de 12 columnas y tu vía class indicas cuantas columnas ocupa cada capa en cada una de las 4 vistas que tiene predefinidas. Bootstrap es un proyecto muy bien documentado, no tendrás problema

      saludos!

    1. Se puede claro. El menú hamburguesa se basa en tener el menú en si (el ul) oculto por CSS y vía Javascript (aunque tb se puede vía CSS) se captura el clic sobre el icono de hamburguesa para que al hacer clic se despliegue el menú. Puedes ver un ejemplo de menú hamburguesa a nivel de toda la web en la página la empresa en la que trabajo: http://roiscroll.com/

      saludos!

  11. Hola Rolando, muchas gracias por el post, es de gran ayuda.

    Quería aprovechar para hacerte una pregunta.. ¿sabes si se puede hacer una especie de media querie para que solo aparezca el código en una ubicación?

    Por ejemplo, algo como @españa, o @méxico, para que dependiendo dónde estés salga una cosa u otra.

    Saludos!

Deja un comentario