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. A través 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 at-CSS) y se pueden usar para diversos casos de uso.
Segmenta los 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 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 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
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 contenido multimedia. 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 diseños están en una hoja de estilo independiente:
<link rel="stylesheet" href="specific.css" media="type and (feature)">
Supongamos que deseas aplicar diferentes estilos dependiendo de si la ventana del navegador se encuentra en modo horizontal.
(el ancho del viewport es mayor que su altura) o el 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.
}
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. 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 @media at-rules.
Ajustar estilos en función del tamaño de viewport
Para el diseño adaptable, una de las funciones multimedia más útiles involucra las dimensiones del viewport del navegador.
Para aplicar estilos cuando la ventana del navegador sea 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 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 está basado principalmente en texto,
Es probable que 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 las 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 la condición de una función de contenido multimedia 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 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 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 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, 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 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 excelente 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 responsivas.
¿Las consultas de medios solo existen para el tamaño de la pantalla?
¿Las pantallas son el único lugar donde se consume o se muestra el 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á por encima de 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 la función de consulta de medios.