Diseño responsive y media queries

¿Qué es el diseño responsive y para qué sirven las media queries en CSS?

Diseño Responsive

Con la aparición de los móviles y las tabletas, cada una con una forma y tamaño de pantalla distinta, es insostenible para un desarrollador web tener que adaptar una versión diferente para cada tipo de dispositivo. Para poder tratar este problema, se ha acuñado el término "responsive", haciendo referencia a un tipo de diseño que se adapta al tamaño de las pantallas en la que se muestra. La forma de aplicar este diseño en CSS es usar media queries.

Media queries

En CSS 2.0 se pueden usar las media type para indicar el tipo de estilos a usar según el tipo de dispositivo que se está usando (impresora o pantalla).

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

Las media queries están disponibles desde la versión 3 de CSS y permiten especificar más detalles en las reglas de las hojas de estilos.

Un ejemplo de regla de media query:

@media (min-width: 768px) and (max-width: 979px) {
  font-size: 40px;
}

Esta regla define los estilos CSS que se usarán cuando la pantalla tenga una dimensión de entre 768px y 979px. En el ejemplo, cuando la pantalla esté entre estas dimensiones, el tamaño de letra será de 40px.

Una buena forma de probar que las media queries funcionan sin tener que usar distintos dispositivos, es modificar manualmente el tamaño de la ventana.