CSS Mostra ou Esconde div conforme screen

[Superwagtel 1]

Olá pessoal, estou estudando o 'responsive site" e me apareceu uma dúvida.

 

Seria possível mostrar ou esconder uma div conforme o tamanho da tela do aparelho do usuário?

 

Exemplo:

 

Tenho duas div's:

 

div id="palco-desk"

 

e

 

div id="palco-tablet"

 

Daí no CSS

 

@media screen and (min-width:769px){

 

#palco-desk{ aparece }

 

}

 

@mwedia screen and(max-width:768){

 

#palco-tablet{ esconde}

 

}

 

Isto para que cada palco apareça de acordo com a tela conforma a idéia do site responsivo.

 

Isto é possível?

 

 

[Diego Arent 19]

Sim, é possível.

 

Basta apenas trabalhar a propriedade display de cada div.

Por exemplo:

@media screen and (min-width:769px)
{
    #palco-desk { display:block; }
    #palco-tablet { display:none; }
}

@media screen and (max-width:768px)
{
    #palco-desk { display:none; }
    #palco-tablet { display:block; }
}

[guilomaker 31]

na verdade não precisa colocar display block na que você vai exibir, pois se você não declarar nem uma propriedade pra ela no @media, ela vai herdar os mesmas propriedades do seu principal, só se você quiser fazer alguma modificação nela pra essa resolução especifica, ai sim!

 

no contrario e só:

@media screen and (min-width:769px)
{
    #palco-desk { }
}

@media screen and (max-width:768px)
{
    #palco-tablet { display:none; }
}

[Diego Arent 19]

 

na verdade não precisa colocar display block na que você vai exibir, pois se você não declarar nem uma propriedade pra ela no @media, ela vai herdar os mesmas propriedades do seu principal, só se você quiser fazer alguma modificação nela pra essa resolução especifica, ai sim!

 

no contrario e só:

@media screen and (min-width:769px)
{
    #palco-desk { }
}

@media screen and (max-width:768px)
{
    #palco-tablet { display:none; }
}

 

Desse jeito, caso a resolução for maior que 769, exibirá tanto o palco-tablet quanto o palco-desk.

[Superwagtel 1]

Realmente funcionou perfeitamente, agora posso definir melhor o layout do site para cada width.

 

Agradeço a força Diego Arent e Guilomaker

[guilomaker 31]

 

Desse jeito, caso a resolução for maior que 769, exibirá tanto o palco-tablet quanto o palco-desk.

 

mais creio que a ideia seja essa, porque escondemos os elementos em resoluções baixas, de acordo que vai aumentando a resolução, vai também voltando ao conteúdo normal.

 

Realmente funcionou perfeitamente, agora posso definir melhor o layout do site para cada width.

 

Agradeço a força Diego Arent e Guilomaker

 

que bom que resolveu isso que e importante!! :yes:

[Diego Arent 19]

 

 

Isto para que cada palco apareça de acordo com a tela conforma a idéia do site responsivo.

 

Eu tinha entendido que era para exibir OU um OU outro, de acordo com a tela (desktop ou tablet).

 

 

 

 

 

mais creio que a ideia seja essa, porque escondemos os elementos em resoluções baixas, de acordo que vai aumentando a resolução, vai também voltando ao conteúdo normal.

 

 

que bom que resolveu isso que e importante!! :yes: