Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

poteitow

Layout Responsivo apenas no Navegador, como resolver?

Por , em Desenvolvimento frontend

Recommended Posts

poteitow    0

poteitow
Postado

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!

Compartilhar este post

Link para o post
Compartilhar em outros sites

André do Vale    76

André do Vale
Postado

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:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito