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
Gostei.
Primeiro, código limpinho, só o que interessa para entender o que era o objetivo.
Segundo, curtinho. Enfadonho ler uma explicação longa para quem não domina o assunto.
Parabéns e grato pela dica. Vai me ajudar a arrumar meu site, que é uma vergonha, só funciona em desktop.