Layout Responsivo apenas no Navegador, como resolver?
Olá,
Fiz o seguinte código para site responsivo:
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>Site Resposivo</title>
<style>body{
padding:0px;
border:0px;
margin:0px;
}
.topo{
background:#003;
color:#FFF;
padding:40px 0px;
width:100%;
text-align:center;
}
.grande{
background:#390;
color:#FFF;
padding:40px 0px;
width:100%;
text-align:center;
}
.medio{
background:#F00;
color:#FFF;
padding:40px 0px;
width:100%;
text-align:center;
}
.pequeno{
background:#06F;
color:#FFF;
padding:40px 0px;
width:100%;
text-align:center;
}@media(max-width:480px){
.grande, .medio{ display:none;}
}
@media(min-width:481px) and (max-width:960px){
.grande, .pequeno{ display:none;}
}
@media(min-width:961px){
.medio, .pequeno{ display:none;}
}
</style>
</head>
<body>
<div class="topo">Titulo da Página</div>
<div class="grande">Para PC</div>
<div class="medio">Para Tablet</div>
<div class="pequeno">Para Celular</div>
</body>
</html>O problema está que este código só funciona no navegador quando redimensiona o tamanho da janela... No dispositivo mobile ele não funciona... porque?
Abraços!
Discussão (2)
Carregando comentários...