Publicado em 25 de mai.

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)

Entre ou cadastre-se para participar da discussão

Entrar Criar conta

André do Vale· 25 de mai.

Fazer um layout responsivo não é apenas mostrar/ocultar elementos. Mas, sim, remodelar o que já existe para se encaixar num melhor uso de outras telas e/ou mídias. Leia: http://tableless.com.br/design-responsivo-na-pratica-do-rascunho-ao-digita/ e pesquisa mais sobre o assunto.

Respondendo a sua dúvida, falta a tag viewport:

poteitow· 25 de mai.

Sim, eu sei André... estou apenas fazendo uns testes, funcionou beleza agora... obrigado!