Para implementar un diseño web adaptable, es importante comprender las consultas multimedia en CSS, especialmente las consultas de pantalla multimedia y solo contenido multimedia.

Comencemos con la pregunta obvia.

¿Qué es una consulta de medios?

Una consulta de medios es una técnica que se introdujo en CSS3. La consulta implica el uso de la regla @media para ejecutar un bloque de propiedades CSS en caso de que una condición predeterminada sea verdadera.

Por ejemplo, el siguiente código indica que si la ventana del navegador es de 400 px o menos, el color de fondo será verde claro:

@pantalla de solo medios y (ancho máximo: 400 px) {
body {
Color de fondo: verde claro;
}
}

Las consultas de medios son especialmente útiles para agregar puntos de interrupción para el diseño adaptable. Dado que los puntos de interrupción son esencialmente números de píxeles en los que el contenido o el diseño aparecen de manera diferente a los usuarios, las consultas de medios se utilizan para definir qué cambios deben ocurrir en qué píxeles.

En el ejemplo siguiente, el código indica que si la ventana del navegador se reduce por debajo de 600px, el ancho de cada columna debe ser 100%:

/* Para escritorio: */
.col – 1 {ancho: 8.33%;}
.col – 2 {ancho: 16.66%;}
.col-3 {ancho: 25%;}
.col – 4 {ancho: 33.33%;}
.col – 5 {ancho: 41.66%;}
.col – 6 {ancho: 50%;}
.col – 7 {ancho: 58.33%;}
.col – 8 {ancho: 66.66%;}
.col – 9 {ancho: 75%;}
.col-10 {ancho: 83.33%;}
.col-11 {ancho: 91.66%;}
.col-12 {width: 100%;}

@media screen and (max-width: 600px) {
/* Para teléfonos móviles: */
{
ancho: 100%;
}
}

Cada consulta de medios consiste en un tipo de medios opcional y una o más expresiones de características de medios. Es posible combinar múltiples consultas de medios con operadores lógicos. Todas las consultas de medios distinguen entre mayúsculas y minúsculas.

Cada consulta de medios se considera verdadera cuando el tipo de medios especificado coincide con los dispositivos en los que se muestra el sitio web. Además, las expresiones de características multimedia también deben ser verdaderas.

¿Qué es la consulta de pantalla multimedia?

La consulta de pantalla @media simplemente significa que la consulta en cuestión está destinada a las pantallas a color o los dispositivos que admiten un modo de «pantalla».

Tomemos un ejemplo:

@media screen y (max-width:500px)

La consulta anterior se aplica a pantallas con un ancho máximo de 500 píxeles. El objetivo de esto es principalmente dirigir el código para distinguir entre «pantalla» y otros tipos de medios (como impresión, braille, relieve, portátil, etc.).).

¿Qué es la consulta de solo medios?

Al agregar el operador lógico ‘only’ a la consulta de medios, el desarrollador se asegura de que la consulta se aplique solo si la condición completa coincide. Si no usa solo, es posible que los navegadores más antiguos no lean o interpreten todas las expresiones de las funciones multimedia. Por ejemplo, si la consulta es

@media screen y (ancho máximo:500px)

los navegadores más antiguos pueden interpretar la consulta como solo pantalla e ignorar el recuento de píxeles. Esto llevaría a la aplicación de la condición de consulta en todas las pantallas. Para evitar esto, puede usar:

@pantalla de solo medios y (ancho máximo:500px)

Cuando utilice el único operador, asegúrese de especificar el tipo de papel.

Importancia en el diseño receptivo

Las consultas de medios son fundamentales para implementar el diseño web receptivo. Las consultas mencionadas anteriormente son dos de las más utilizadas y son útiles para garantizar que el contenido de su sitio web esté optimizado para tamaños y tipos de dispositivos.

Una vez que haya utilizado consultas CSS en su sitio web, asegúrese de verificar su efectividad. La forma más fácil de hacerlo es usar una herramienta que te permita probar el diseño de tu sitio web en dispositivos y navegadores reales. Hay varias herramientas para facilitar esto, pero tómese su tiempo para encontrar un comprobador receptivo en línea que le brinde la oportunidad de probar en una variedad suficientemente amplia de dispositivos, tanto de escritorio como móviles.