Remover e adicionar elementos dependendo da resolução

Neste artigo você vai aprender a remover e adicionar elementos dependendo da resolução no seu projeto web e isso com CSS puro, sem utilizar recursos mirabolantes.

Fala programador(a), beleza? Bora aprender coisa nova! 😀

Neste problema de adicionar ou remover elementos de acordo com a resolução, nós estamos falando de responsividade

Ou seja, em determinadas resoluções a tela se adapta de alguma forma, que pode até adicionar um elemento

Para isso utilizamos media queries, que é a forma que temos para controlar um determinado estilo de CSS em uma resolução específica

Vamos um projeto de exemplo, para entender o que acontece:

<!DOCTYPE html>
<html>
<head>
    <title>Remover e adicionar elementos dependendo da resolução</title>
    <meta charset="utf-8">
</head>
<body>
    <div id="box"></div>
    <div id="box2"></div>
</body>
</html>

Essa div com id de box, só será exibida em resoluções menores que 1000px

Já a div com id de box2, vai sumir quando a resolução ficar menor que 800px

Veja o CSS necessário para estas exibições e remoções:

div {
    width: 50px;
    height: 50px;
}

#box {
    background-color: red;
    display: none;
}

#box2 {
    background-color: blue;
}

@media(max-width: 1000px) {
    #box {
        display: block;
    }
}

@media(max-width: 800px) {
    #box2 {
        display: none;
    }
}

Antes da explicação do código, faça o resize do seu navegador e veja que os elementos se comportam igual o mencionado anteriormente

Quer se especializar em Desenvolvimento Web? Veja o nosso catálogo de cursos.

E o único momento que os elementos aparecem juntos é quando a tela fica entre 800px e 1000px, que é exatamente o proposto

Antes das media queries, o código foi somente para definir cada div dando largura, altura e uma cor de fundo

Já a propriedade @media(max-width: 1000px) está definindo que todas as regras que estão ali serão executadas quando a tela ficar menor que 1000px

E a @media(max-width: 800px) está definindo o que vai acontecer abaixo dos 800px

E é desta maneira que controlamos os estilos em determinadas resoluções

Temos a regra max-width também, que funciona ao contrário de min-width

Conclusão

Neste artigo prendemos como remover e adicionar elementos dependendo da resolução

Para isso utilizamos as media queries, que são responsáveis pelos ajustes de responsividades em sites

Ou seja, com elas conseguimos manipular regras de CSS dependendo da resolução da tela

Não apenas adicionar ou remover elementos, mas qualquer coisa que esteja ao alcance do CSS

Confira também nosso catálogo de cursos gratuitos, com aulas semanais no YouTube