Como ocultar elementos usando consultas de mídia

As consultas de mídia CSS são chamadas de consultas que permitem alterar a aparência de um site de acordo com o dispositivo em que está sendo exibido. Essas consultas utilizam a regra CSS @media e exigem que você defina um tipo de mídia e certos recursos de mídia na forma de expressões lógicas. Há muitas coisas que você pode fazer no seu site responsivo usando consultas de mídia, no entanto, neste artigo, vamos discutir como você pode ocultar seus elementos usando essas consultas.

Vamos começar.

Como ocultar elementos usando consultas de mídia

Como já mencionado, as consultas de mídia ajudam você a projetar páginas da web responsivas. Esses sites responsivos exigem que você tenha um determinado tamanho de tela para ter acesso completo a determinados recursos. Aqui vamos demonstrar como ocultar elementos usando consultas de mídia, mas antes disso vamos entender primeiro a sintaxe dessas consultas.

Sintaxe

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

//Código;

Uma consulta sempre começa com a regra @media e exige que você especifique o tipo de mídia no qual a consulta deve ser aplicada. Por exemplo, usamos o tipo de mídia de tela aqui na sintaxe acima. Posteriormente, certos operadores como 'e' são usados ​​para combinar recursos de mídia, como largura de minúsculas ou largura máxima.

Agora que temos um bom entendimento da sintaxe da consulta da mídia, vamos aprender a ocultar elementos usando essas consultas com a ajuda de um exemplo.

Html

Isso será visível se a largura da tela máxima for 700px ou mais larga.
Isso será visível se a largura da tela máxima for 300px ou mais larga.
Isso será visível se a largura da tela máxima for 200px ou mais larga.

Aqui, criamos três elementos div e atribuímos uma classe diferente a cada um deles para demonstrar como ocultar elementos com base em diferentes tamanhos de tela.

CSS

div.contêiner
Background-Color: Rosybrown;
Largura: 200px;
Altura: 100px;
preenchimento: 15px;
margem: 5px;
Exibição: bloco embutido;

No código acima, estamos denominando todos os três elementos de div, tudo de uma vez usando a classe de contêiner. Os elementos receberam alguma cor de fundo, largura, altura, estofamento e margem. Além disso, estamos exibindo esses elementos como bloqueio embutido, porque mais tarde, ao usar as consultas de mídia, sua exibição deve ser definida para nenhum para escondê-los.

CSS

@media tela e (max-width: 700px)
div.grande
Mostrar nenhum;

Na consulta acima, estamos especificando que os dispositivos que têm largura máxima de até 700px, o div com o nome da classe "grande" se esconderá à medida que a tela foi definida como nenhum. No entanto, se a largura da tela for 700px ou mais larga, os elementos serão visíveis.

CSS

Screen @Media e (Max-Width: 300px)
div.médio
Mostrar nenhum;

Enquanto isso, esta consulta afirma mostrar o contêiner Div com o nome da classe "Médio" apenas quando a largura da tela é 300px ou mais larga, caso contrário, será oculto.

CSS

@Media Screen e (Max-Width: 200px)
div.pequeno
Mostrar nenhum;

E, finalmente, a consulta acima especifica para mostrar o contêiner Div na condição quando a largura da tela for 200px ou mais larga; caso contrário, a consulta da mídia ocultará o

Saída

Quando o tamanho da tela é 700px ou maior.

Quando o tamanho da tela está entre 300px e 700px.

E quando a largura da tela é entre 200px e 300px.

Os elementos estavam escondidos usando consultas de mídia com sucesso.

Conclusão

Com o objetivo de ocultar elementos com consultas de mídia, você simplesmente precisa definir a exibição deles para nenhum dentro da consulta de mídia específica. As consultas de mídia provam ser de grande utilidade ao projetar sites responsivos; portanto, você pode usá -los para tornar seus elementos acessíveis, dependendo do tamanho da tela do dispositivo. Aqui neste post, demonstramos com a ajuda de um exemplo de como você pode ocultar seus elementos usando consultas de mídia.