Cómo ocultar elementos utilizando consultas de medios

Las consultas de CSS Media se denominan consultas que le permiten alterar la apariencia de un sitio web de acuerdo con el dispositivo en el que se está mostrando. Estas consultas hacen uso de la regla CSS @Media y requieren que defina un tipo de medio y ciertas características de medios en forma de expresiones lógicas. Hay muchas cosas que puede hacer en su sitio web receptivo utilizando consultas de medios, sin embargo, en este artículo, vamos a discutir cómo puede ocultar sus elementos utilizando estas consultas.

Vamos a empezar.

Cómo ocultar elementos utilizando consultas de medios

Como ya se mencionó, las consultas de los medios lo ayudan a diseñar páginas web receptivas. Estos sitios web receptivos requieren que tenga un determinado tamaño de pantalla para tener acceso completo a ciertas características. Aquí vamos a demostrar cómo ocultar elementos utilizando consultas de medios, pero antes de eso entendamos la sintaxis de estas consultas.

Sintaxis

@Media Screen y (Min-Width: 480px) y (Max-Width: 720px)

//Código;

Una consulta siempre comience con la regla @Media y requiere que especifique el tipo de medio en el que se aplicará la consulta. Por ejemplo, hemos utilizado el tipo de medio de pantalla aquí en la sintaxis anterior. Posteriormente, ciertos operadores como 'y' se utilizan para combinar características de los medios como Min-Width o Max-Width.

Ahora que tenemos una buena comprensión de la sintaxis de la consulta de medios, aprendamos a ocultar elementos usando estas consultas con la ayuda de un ejemplo.

Html

Esto será visible si el ancho de pantalla máximo es de 700 px o más amplio.
Esto será visible si el ancho de pantalla máximo es de 300 px o más ancho.
Esto será visible si el ancho de pantalla máximo es 200px o más amplio.

Aquí hemos creado tres elementos Div y asignado una clase diferente a cada uno de ellos para demostrar cómo ocultar elementos sobre la base de diferentes tamaños de pantalla.

CSS

div.envase
Color de fondo: Rosybrown;
Ancho: 200px;
Altura: 100px;
relleno: 15px;
margen: 5px;
Pantalla: bloque en línea;

En el código anterior, estamos diseñando los tres elementos DIV a la vez usando la clase de contenedor. Los elementos recibieron algo de color de fondo, ancho, altura, acolchado y margen. Además, estamos mostrando estos elementos como bloque en línea porque más tarde, cuando se usa consultas de medios, su pantalla debe establecerse en ninguno para ocultarlos.

CSS

@Media Screen y (Max-Width: 700px)
div.grande
Pantalla: ninguno;

En la consulta anterior, estamos especificando que los dispositivos que tienen un ancho máximo de hasta 700px, el DIV con el nombre de clase "grande" se ocultará a medida que la pantalla se ha establecido en ninguno. Sin embargo, si el ancho de la pantalla es de 700 px o más amplio, entonces los elementos serán visibles.

CSS

@Media Screen y (Max-Width: 300px)
div.medio
Pantalla: ninguno;

Mientras tanto, esta consulta establece para mostrar el contenedor Div con el nombre de clase "medio" solo cuando el ancho de la pantalla es de 300 px o más ancho, de lo contrario se ocultará.

CSS

@Media Screen y (Max-Width: 200px)
div.pequeño
Pantalla: ninguno;

Y, por último, la consulta anterior especifica para mostrar el contenedor DIV en la condición cuando el ancho de la pantalla es de 200 px o más amplio, de lo contrario, la consulta de medios ocultará la

Producción

Cuando el tamaño de la pantalla es de 700 px o más grande.

Cuando el tamaño de la pantalla está entre 300 px y 700px.

Y cuando el ancho de la pantalla está entre 200 px y 300px.

Los elementos se ocultaron con éxito utilizando consultas de medios.

Conclusión

Con el fin de ocultar elementos con consultas de medios, simplemente debe configurar su pantalla en ninguna dentro de la consulta de medios específica. Las consultas de los medios demuestran ser de gran utilidad al diseñar sitios web receptivos, por lo tanto, puede usarlas para que sus elementos sean accesibles dependiendo del tamaño de la pantalla del dispositivo. Aquí en esta publicación, hemos demostrado con la ayuda de un ejemplo de cómo puede ocultar sus elementos utilizando consultas de medios.