Mostrar código diferente em diversas resoluções

Publicado em 21 de abril de 2019

As vezes é necessário mostrar ou esconder um código em uma determinada resolução, dá uma olhada no exemplo abaixo:

Para esconder uma div em uma determinada resolução com o Boostrap 4 é simples, basta usar a propriedade display mostrada no código de exemplo abaixo, o qual a intenção é esconde a div para apenas as telas xs.

<div class="d-none d-sm-block">
    <p>Não irei aparecer em telas xs</p>
</div>

Se quiser saber mais sobre essa maravilha, segue a documentação em Português do Bootstrap 4 que fala tudo: https://getbootstrap.com.br/docs/4.1/utilities/display/

Outra forma de fazer isso é com as media queries do CSS, no exemplo abaixo quando a tela possuir uma largura menor que 600px, o fundo da página ficará verde.

@media only screen and (max-width: 600px) {
  body {
    background-color: green;
  }
}

Segue abaixo a fonte do exemplo acima e mais dois links de foruns respondendo dúvidas sobre esse assunto.

https://www.w3schools.com/css/css_rwd_mediaqueries.asp

http://www.codigosnaweb.com/forum/viewtopic.php?t=8824#p31226

https://pt.stackoverflow.com/questions/37857/remover-e-adicionar-elementos-dependendo-da-resolu%C3%A7%C3%A3o

Categoria: Front-end