Ir para conteúdo

POWERED BY:

Arquivado

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

shariken

Design Responsivo

Por , em Desenvolvimento frontend

Recommended Posts

shariken    0

shariken
Postado

Galera preciso de uma ajuda com o responsivo desse site e nao sei nem por onde começar: http://lender.qlix.com.br/jornal/index.html

 

Se vcs perceberem ta sem o @media screen o responsivo, se vcs abrirem em 480px 768px vao ver que fica tudo zuado, menos o menu pq o jquery que eu peguei ja vem pronto o design, estou fazendo do zero este site e sou novo nisso.

Como faço pro site se adequar a todas as resoluçoes de tela?

Se alguem puder me ajudar agradeceria.

Compartilhar este post

Link para o post
Compartilhar em outros sites

joaohenrique010    0

joaohenrique010
Postado

Tente fazer assim:

1. Logo após a tag <html> crie uma <div id="container"> e feche-a antes da tag </html>

2. No CSS, escreva: #container{position:relative;margin:0 auto;}

Ou então usa a seguinte lógica: (<= significa menor ou igual)

<script type="text/javascript">
if (screen.width<=480||screen.height<=768) {

window.location("/mobile");

}

</script>


Você cria um site diferente para caso o usuário esteja usando um dispositivo mobile. Essa é a lógica.

Compartilhar este post

Link para o post
Compartilhar em outros sites

shariken    0

shariken
Postado

Acho que o unico jeito vai ser a segunda maneira, vou ter que fazer um if pra pode chamar outra pagina que foi feita pra mobile entao?

 

 

E no caso pra fazer isso esse script que voce me passou funcionaria pra isso? Em qual parte do codigo eu chamaria outra pagina caso seja mobile?

 

<script type="text/javascript">
if (screen.width<=480||screen.height<=768) {

window.location("/mobile");

}

</script>

Acho que seria mais facil por exemplo

se for 480px o site abriria outra pagina feita só pra essa resolução.

Nao sei, seria o jeito mais certo de se fazer ?

Eu estava tentando usar o @media screen , so que nao sei o que colocar dentro do @media screen pra ficar certo .

Compartilhar este post

Link para o post
Compartilhar em outros sites

WictorP    9

WictorP
Postado

Se usa isso quando não vão ter algumas tags HTML no modo mobile, mas tem como fazer no css.

 

@media screen and (min-width: 200px) and (max-width: 640px)

 

Redefina todas as TAGS do CSS em cada responsive, e não vai bugar, tenha certeza.

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