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. Mediante el uso de 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 general de CSS) y se pueden usar para diversos casos de uso.
Segmenta diferentes tipos de resultados
Los sitios web a menudo se muestran en las pantallas, pero CSS también se puede usar para diseñar sitios web para otros resultados. Es posible que quieras que tus páginas web se vean de una manera en una pantalla, pero diferente cuando se impriman. Esto es posible gracias a la consulta 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 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 at @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,
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. Se llaman consultas de medios. La CSS se aplica solo si el tipo de medio coincide y si 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 quieres aplicar estilos diferentes en función de 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:
<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 lo deseas:
@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 estar bien usar hojas de estilo separadas para diferentes tipos de medios, como print, probablemente no sea una buena idea usar una hoja de estilo separada para cada consulta de medios. Usa at-rules de @media en su lugar.
Cómo ajustar estilos según el tamaño de la vista del puerto
Para el diseño responsivo, una de las funciones multimedia más útiles involucra 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 multimedia max-width para aplicar estilos con un ancho inferior a un ancho específico:
@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, 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.
}
Cómo elegir los puntos de interrupción según el contenido
El punto en el que se cumple la condición de una función multimedia se denomina punto de interrupción. Es mejor elegir los puntos de interrupción según tu contenido en lugar de tamaños de dispositivos populares, ya que 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 muy 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 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, tienen que 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 solo las columnas 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, el viewport debe tener al menos 50em de ancho y 60em de alto para que se apliquen los estilos de columna.
Estos puntos de interrupción se eligieron según 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 diseños al factor de forma del dispositivo de un usuario, pero estos son solo el comienzo de posibilidades. Las consultas de medios pueden ir mucho más allá del ancho y la altura, y acceder a las preferencias del usuario sobre las funciones de accesibilidad y los colores de los temas. El uso de consultas de medios para realizar ajustes de diseño es un excelente comienzo para un diseño adaptable, que se basa en estas funciones y mucho más.
Verifica tus conocimientos
Pon a prueba tus conocimientos sobre las consultas de medios responsivas.
¿Las consultas de medios solo existen para el tamaño de la pantalla?
¿Las pantallas son el único lugar en el que se consume o muestra contenido web?
¿El tipo de medio predeterminado es?
screenscreen no es el tipo predeterminado.nonenone no es un tipo de medio válido.allsomesome no es un tipo de medio válido.landscapelandscape no es un tipo de medio válido.¿Qué usarías para evitar que el navegador escale un diseño en dispositivos móviles?
width: 100%font-size: 200%<meta name="viewport" content="width=device-width, initial-scale=1">Qué consulta de medios se aplica cuando la ventana del navegador está superior a 720px
@media (width: 720px)720px.@media (max-width: 720px)720px.@media (min-width: 720px)720px.@media (clamp-width: 720px)clamp-width no es una condición válida de función de consulta de medios.