Como remover e adicionar elementos dependendo da resolução do dispositivo?

Atendendo a pedidos, neste artigo vou abordar sobre Media Queries, que é a utilização de Media Types com uma ou mais expressões envolvendo características de uma media para definir formatações para diversos dispositivos. Os browsers ou as aplicações leem as expressões definidas na Query, caso o dispositivo em questão se encaixe nessas requisições o CSS será aplicado.

Media Queries Resolução em CSS
Imagem/Reprodução: Lynda

Os Media Types definem para que tipo de media um certo código CSS é direcionado. O HTML foi gerado para ser portátil, ou seja, lido e interpretado por qualquer tipo de dispositivo. Só que cada dispositivo exibe o HTML de uma maneira, devido a fatores como, por exemplo, as dimensões da tela (“resolução“). Supondo que acabo de acessar um site através de um desktop, ele não terá a mesma reação de que se acessarmos por um dispositivo móvel. Isso ocorre porque são dispositivos diferentes e formas diferentes de navegação.

Os problemas das Media Queries são que cada vez mais surgem dispositivos com diversos tamanhos e também com hardwares bem parecidos aos dos desktops, fazendo com que esses dispositivos tenha uma navegação quase igual aos dos desktops. Nesse caso, posso citar como exemplo o iPhone X, sua tela tem excelente qualidade e seu navegador reproduz as páginas como um navegador comum de desktop.

Elementos Resolução em CSS
Imagem/Reprodução: Cambridge Community Television

Assim não há a necessidade de preparar um layout e um CSS com Media Type Handheld para o iPhone, pois mesmo ele sendo um Handheld, ele não trabalha como um, porém, é importante frisar que ele também não trabalha exatamente como um desktop. Mesmo a renderização do Safari sendo idêntica ao de um desktop, existe a questão do comportamento do usuário e a forma de navegação que são diferentes. Assim ficamos em um meio termo, nem podendo disponibilizar um CSS específico para Handheld e nem um CSS totalmente Screen.

Vejamos abaixo como você deve definir o parâmetro a ser carregado:

<style>@media screen and (max-width:1024px){.resolucaomenor{display:none}}.resolucaomenor{display:show}</style>

Se preferir (opcional), você pode criar um arquivo em .CSS e salvá-lo em sua instância ou na solução da minha startup: o Blenner OS SmartCDN. Em sequência, você deve inserir em seu arquivo HTML criado logo no princípio (metadados):

<link rel=”stylesheet” href=”ENDEREÇO URL”>

Após inserir os comandos em .CSS, você deve “chamar” o comando global onde você deseja aplicar as novas funções variáveis, conforme desejado. Veja o exemplo aplicável a uma imagem e a divisão nomeada de “C”:

<c class=”resolucaomenor”><img src=”ENDEREÇO DA IMAGEM” alt=”DESCRIÇÃO” id=”COMANDO ADICIONAL (OPCIONAL)”></c>

Espero ter ajudado! 😀
Deixem seus comentários e compartilhe com os amigos!

Juan de Souza

Tenho 18 anos, Fundador & CEO do TFX Startup, uma empresa com produtos, serviços e projetos inovadores. Meu primeiro empreendimento foi aos 10 anos utilizando conexão dial-up (discada).