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 y otros aspectos. 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.

Cómo segmentar diferentes tipos de resultados

Los sitios web suelen mostrarse en pantallas, pero también se puede usar CSS para diseñar sitios web para otros resultados. Es posible que desees que tus páginas web se vean de una manera en la pantalla, pero de otra cuando se impriman. Consultar los tipos de medios hace que esto sea posible.

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

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

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

Puedes usar la regla @@media en tu hoja de diseño de esa manera, o bien puedes crear una hoja de diseño separada 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, automáticamente tendrá 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 medios. Se llaman consultas de medios. El CSS solo se aplica si el tipo de medio coincide y la condición también es verdadera. Estas condiciones se denominan funciones de medios.

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 se encuentran en una hoja de estilo separada:

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

Supongamos que deseas aplicar diferentes diseños 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 de medios 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 diseño 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 medio es all. Dado que ese es el valor predeterminado, puedes omitirlo si quieres:

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

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

O bien, usa hojas de estilo independientes:

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

Si bien usar hojas de estilo separadas para diferentes tipos de medios, como print, puede ser aceptable, probablemente no sea una buena idea usar una hoja de estilo separada para cada consulta de medios. En su lugar, usa las reglas @ @media.

Ajusta los diseños según el tamaño de la ventana gráfica

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

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

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

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

Esta consulta de medios también se puede escribir con la función de medios width y el operador menor que o igual a.

@media (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, es posible que los píxeles sean la mejor opción. Si tu contenido se basa principalmente en texto, probablemente tenga más sentido usar una unidad relativa basada 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 medios para aplicar más de una condición. Usa la palabra and para combinar tus consultas de medios:

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

También se puede escribir con la sintaxis de rango.

@media (50em <= width <=60em) {
  /* Styles for viewports wider than 50em and narrower than 60em. */
}

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

El punto en el que una condición de función de medios se vuelve verdadera se denomina punto de interrupción. Es mejor elegir los puntos de interrupción según tu contenido en lugar de los tamaños de dispositivos populares, ya que estos están sujetos a cambios 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 demasiado 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 basadas en la altura del viewport, no solo en el ancho. Esto podría 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 en una columna y, luego, volver a desplazarse 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 consultas de medios para que los estilos solo se apliquen cuando todas las condiciones sean verdaderas. En este ejemplo, la ventana gráfica debe tener al menos 50em de ancho y 30em de alto para que se apliquen los diseños de columna. Esos puntos de interrupción se eligieron en función de la cantidad de contenido.

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

También puedes usar las palabras clave or y not para expresar situaciones más complejas cuando quieras aplicar estilos. Puede ser difícil razonar sobre ellas de forma lógica, así que asegúrate de probar que funcionan y que interactúan como esperas.

@media not ((width >= 30em) or (orientation: landscape)) {
  /* These styles won't be shown if the viewport is wider than 30em, or if the orientation is landscape. */
  .navlist {
    flex-direction: column;
  }
}

Estos ejemplos muestran cómo se pueden usar las consultas de medios para adaptar los diseños al factor de forma del dispositivo de un usuario, pero solo son una pequeña muestra de las posibilidades. Las consultas de medios pueden ir mucho más allá del ancho y la altura, ya que acceden a las preferencias del usuario para las funciones de accesibilidad y los colores del tema. Usar consultas de medios para realizar ajustes en el diseño es un excelente comienzo para un diseño responsivo, que se basa en estas funciones y muchas más.

Verifica tus conocimientos

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