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 at-CSS) y se pueden usar para diversos casos de uso.

Segmenta tus anuncios para diferentes tipos de resultados

Los sitios web a menudo se muestran en las 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 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 estableció en gris. Sin embargo, si se imprime la página, el color de fondo debería ser transparente. Esto guardará la tinta de la impresora del usuario.

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

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

Puedes usar la regla-at @media en tu hoja de estilo de esa manera, También 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 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 llaman funciones de contenido 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 omitirlo si lo deseas:

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

O con hojas de estilo separadas:

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

Aunque usar hojas de estilo independientes para los diferentes tipos de medios, como print, puede estar bien, probablemente no sea una buena idea usar una hoja de estilo independiente para cada consulta de medios. En su lugar, usa reglas de @media.

Ajusta los estilos según el 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 medios max-width para aplicar estilos por 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 medios:

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

Cómo elegir los puntos de interrupció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 interrupció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 momento.

@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 en 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 60em de alto para que se apliquen los estilos de columna. Esos puntos de interrupción se eligieron en función de la cantidad de contenido.

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

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 estas solo raspan la superficie de las posibilidades. Las consultas de medios pueden abarcar más allá del ancho y el alto acceder a las preferencias del usuario para las funciones de accesibilidad y los colores de los temas. El uso de consultas de medios para realizar ajustes de diseño es un gran comienzo para un diseño responsivo, que se basa en estas funciones y más.

Verifica tus conocimientos

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