Consultas de medios

Los diseñadores pueden ajustar sus diseños para adaptarse a los usuarios. El ejemplo más claro de esto es el factor de forma del dispositivo de un usuario, su ancho, la relación de aspecto del dispositivo, etcétera. Con las consultas de medios, los diseñadores pueden responder a estos diferentes factores de forma.

Las consultas de medios se inician con la palabra clave @media (una regla @ de CSS) y se pueden usar para una variedad de casos de uso.

Segmenta tus anuncios para diferentes tipos de resultados

Los sitios web suelen mostrarse en pantallas, pero el CSS también se puede usar para aplicarles diseño a otros resultados. Es posible que desees que tus páginas web se vean de una manera en una pantalla, pero de otra cuando se impriman. Esto es posible gracias a las consultas de tipos de medios.

En este ejemplo, el color de fondo se establece en gris. Sin embargo, si la página se imprime, el color de fondo debe ser transparente. Esto ahorra la tinta de la impresora del usuario.

body {
  color: black;
  background-color: grey;
}

@media print {
  body {
    background-color: transparent;
  }
}

Puedes usar la regla de @media en tu hoja de estilo de esa manera, o puedes crear una hoja de estilo independiente y usar el atributo media en un elemento link:

<link rel="stylesheet" href="global.css">
<link rel="stylesheet" href="print.css" media="print">

Si no especificas ningún tipo de medio para tu CSS, este tendrá automáticamente un valor de tipo de medio de all. Estos dos bloques de CSS son equivalentes:

body {
  color: black;
  background-color: white;
}

@media all {
   body {
     color: black;
     background-color: white;
   }
}

Estas dos líneas de HTML también son equivalentes:

<link rel="stylesheet" href="global.css">

<link rel="stylesheet" href="global.css" media="all">

Condiciones de la consulta

Puedes agregar condiciones a los tipos de contenido multimedia. Estas se denominan consultas de medios. El CSS se aplica solo si el tipo de contenido multimedia coincide y la condición también es verdadera. Estas condiciones se denominan funciones multimedia.

Esta es la sintaxis de las consultas de medios:

@media type and (feature)

Puedes usar consultas de medios en un elemento link si tus estilos están en una hoja de estilo independiente:

<link rel="stylesheet" href="specific.css" media="type and (feature)">

Supongamos que deseas aplicar diferentes estilos según si la ventana del navegador está en modo horizontal (el ancho del viewport es mayor que su altura) o en modo vertical (la altura del viewport es mayor que su ancho). Hay una función multimedia llamada orientation que puedes usar para probar lo siguiente:

@media all and (orientation: landscape) {
   // Styles for landscape mode.
}
@media all and (orientation: portrait) {
   // Styles for portrait mode.
}

O bien, si prefieres tener hojas de estilo separadas, haz lo siguiente:

<link rel="stylesheet" href="landscape.css" media="all and (orientation: landscape)">
<link rel="stylesheet" href="portrait.css" media="all and (orientation: portrait)">

En este caso, el tipo de contenido multimedia es all. Como ese es el valor predeterminado, puedes dejarlo fuera si quieres:

@media (orientation: landscape) {
   // Styles for landscape mode.
}
@media (orientation: portrait) {
   // Styles for portrait mode.
}

También puedes usar hojas de estilo independientes:

<link rel="stylesheet" href="landscape.css" media="(orientation: landscape)">
<link rel="stylesheet" href="portrait.css" media="(orientation: portrait)">

Si bien puede ser adecuado usar hojas de estilo separadas para diferentes tipos de contenido multimedia, como print, es probable que no sea una buena idea usar una hoja de estilo independiente para cada consulta de contenido multimedia. En su lugar, usa reglas de @media.

Ajusta los estilos en función del tamaño de la ventana de visualización

En el caso del diseño responsivo, una de las funciones multimedia más útiles incluye las dimensiones del viewport del navegador. Para aplicar estilos cuando la ventana del navegador es más ancha que un ancho determinado, usa min-width.

@media (min-width: 400px) {
  // Styles for viewports wider than 400 pixels.
}

Usa la función de contenido multimedia max-width para aplicar diseños debajo de un ancho determinado:

@media (max-width: 400px) {
  // Styles for viewports narrower than 400 pixels.
}

Puedes usar cualquier unidad de longitud de CSS en tus consultas de medios. Si tu contenido se basa principalmente en imágenes, los píxeles pueden ser la mejor opción. Si tu contenido se basa principalmente en texto, probablemente sea más conveniente usar una unidad relativa que se base en el tamaño del texto, como em o ch:

@media (min-width: 25em) {
  // Styles for viewports wider than 25em.
}

También puedes combinar consultas de contenido multimedia para aplicar más de una condición. Usa la palabra and para combinar tus consultas de contenido multimedia:

@media (min-width: 50em) and (max-width: 60em) {
  // Styles for viewports wider than 50em and narrower than 60em.
}

Elige los puntos de inflexión según el contenido

El punto en el que una condición de función multimedia se vuelve verdadera se denomina punto de interrupción. Es mejor elegir los puntos de inflexión en función de tu contenido en lugar de los tamaños de dispositivos populares, ya que estos pueden cambiar con cada ciclo de lanzamiento de tecnología.

En este ejemplo, 50em es el punto en el que las líneas de texto se vuelven incómodamente largas. Por lo tanto, se crea un punto de interrupción para que la interfaz sea más legible. Con la propiedad column-count, el texto se divide en dos columnas a partir de ese punto.

@media (min-width: 50em) {
  article {
    column-count: 2;
  }
}

Combinaciones

Puedes usar consultas de medios según la altura del viewport, no solo el ancho. Esto puede ser útil para optimizar el contenido de la interfaz en la mitad superior de la página. En el ejemplo anterior, si los lectores usan una ventana del navegador ancha pero corta, deben desplazarse hacia abajo una columna y, luego, hacia arriba para llegar a la parte superior de la segunda columna. Sería más seguro aplicar las columnas solo cuando el viewport sea lo suficientemente ancho y alto.

Puedes combinar las consultas de medios para que los estilos solo se apliquen cuando se cumplan todas las condiciones. En este ejemplo, el viewport debe tener al menos 50em de ancho y 30em de alto para que se apliquen los estilos de columna. Esos puntos de inflexión se eligieron en función de la cantidad de contenido.

@media (min-width: 50em) and (min-height: 30em) {
  article {
    column-count: 2;
  }
}

En estos ejemplos, se muestra cómo se pueden usar las consultas de contenido multimedia para adaptar los diseños al factor de forma del dispositivo de un usuario, pero solo se mencionan algunas de las posibilidades. Las consultas de medios pueden ir mucho más allá del ancho y la altura, y acceder a las preferencias del usuario para las funciones de accesibilidad y los colores del tema. El uso de consultas de medios para realizar ajustes de diseño es un excelente comienzo para un diseño responsivo, que se basa en estas funciones y muchas más.

Verifica tu comprensión

Pon a prueba tus conocimientos sobre las consultas de medios responsivos.