1

Estou trabalhando em um projeto no qual preciso esconder ou remover uma <div> caso o usuário acesse o sistema pelo celular, pesquisando no Google vi alguns exemplos de com fazer isso utilizando o Bootstrap, gostaria de saber se tem alguma forma de fazer com o Materialize.

0

3 Respostas 3

1

Se o caso é esconder a <div> você poderia utilizar as regras de @media utilizando CSS.

@media screen and (min-width: 0px) and (max-width: 440px){
    div{
        display: none;
    }        
}

espero que te ajude!

3
  • 1
    E Se o cara colocar o cel na horizontal ao a "tela" vai para 700px ou sei la, ai como fica essa regra?
    – hugocsl
    Commented 20/02/2019 às 22:07
  • Funcionou perfeitamente obrigado Commented 20/02/2019 às 23:21
  • respondendo ao hugocs, caso o usurário esteja utilizando a navegação horizontal a div volta a aparecer, porém no meu caso não tem problema Commented 20/02/2019 às 23:23
0

A forma correta de fazer isso é usando as classes dos Helpers do próprio Materialize

Então ficaria como isso

<div class="hide-on-small-only"></div>

Documentação oficial conforme imagem https://materializecss.com/helpers.html

inserir a descrição da imagem aqui

0

Olá, respondendo sua pergunta você pode usar o atributo de orientação na regra de @media por exemplo no primeiro código, vai ser executado se o usuário estiver com o celular na vertical ou seja "portrait" e o segundo será executado caso o usuário estiver com o celular na horizontal ou seja "landscape".

1 - code1

@media screen and (min-width: 0px) and (max-width: 440px) and (orientation: portrait){
div{
    display: none;
}        

}

Então basicamente esse código está fazendo é caso for screen(tela) e a tela tiver uma largura máxima de 440px e estiver na orientação portrait(vertical) execute este código no caso seria "display: none" mais você pode colocar oque você quiser!

2 - code2

@media screen and (min-width: 0px) and (max-width: 440px) and (orientation: landscape){
div{
    display: none;
}        

}

esse código é semelhante ao anterior só muda que a orientação é "landscape" na horizontal.

é muito simples!!! se quiser saber mais sobre @media estude um pouco nestes sites são otimos

https://www.w3schools.com/cssref/css3_pr_mediaquery.asp

https://www.devmedia.com.br/utilizando-css-media-queries/27085

https://developer.mozilla.org/pt-BR/docs/Web/CSS/@media

1
  • Vlw pela força, vou estudar o conteúdo que vc passou Commented 21/02/2019 às 22:22

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .