Ir ao conteúdo
  • Cadastre-se
Fernando Cardoso de Melo

Site para todas as resoluções

Recommended Posts

Olá.


 


Eu faço sites mas ainda sou iniciante. Conheço muito pouco principalmente CSS e javascript. Normalmente uso divs nos meus sites ao invés de tabelas, porque as divs podem ser movidas para qualquer ponto da tela.


 


Ocorre que o site exibido na mesma resolução em que foram feitos fica perfeito. Contúdo quando é exibido em telas com resolução diferente fica desajustado na tela principalmente em resoluções menores.


 


O que eu estou querendo descobrir, é um jeito de auto ajustar a resolução para o monitor do visitante. Normalmente eu centralizo o site em uma div que chamo de #base portanto fica bem centralizado. Isso está ok.


 


Por exemplo: www.fernandoinfo.com.br/temp.html


 


As duas divs aparecem bem na minha resolução de 1360 X 768. Se eu ajuastar mina resolução para 1024 X 768 as divs ficam fora da tela. O que quero é um script ou código css que arrume tudo automaticamente.


 


Alguém sabe um jeito de auto ajustar a resolução para se adequar ao monitor do visitante? Pode ser no CSS ou um script.


 


Valeu gente.


Compartilhar este post


Link para o post
Compartilhar em outros sites

@Fernando Cardoso de Melo

 

Você precisa implementar a responsividade.

 

Veja um exemplo: http://jsfiddle.net/3jmm9jon/

 

redimensione para ver as mudanças de cores. Perceba que no css, foi definido regras com media queries, onde cada resolução tem um background diferente, e ajustando os elementos dentro dele de forma fluida.

 

Referências para estudo:

http://www.devmedia.com.br/utilizando-css-media-queries/27085

http://tableless.com.br/introducao-sobre-media-queries/

https://developer.mozilla.org/pt-BR/docs/Web/Guide/CSS/CSS_Media_queries

Compartilhar este post


Link para o post
Compartilhar em outros sites

Obrigado por responder. Essa técnica eu já tinha visto pesquisando. Tem que fazer duas versões do site. Uma para resolução "X" outra para resolução "Y" correto?

 

O que eu não queria é justamente isso. Pensei em um script talvez. Algo que identificasse a resolução do visitante e redimensionasse tudo para essa resolução. Será que existe isso?

 

Vi também que fazendo as medidas todas em % também funciona. estou tentando encontrar um tipo de calculadora que convertesse px em %. Mas isso para ajustar a distancia.

 

EX: Uma div que fica a 250px da margem. Quanto é isso em %? Porque aí posso converter tudo.

 

Enfim...Se souber de mais alguma coisa posta aí.

 

Grato

Compartilhar este post


Link para o post
Compartilhar em outros sites

@Fernando Cardoso de Melo

 

Aquilo que eu disse é só o norte da solução.  de fato as medias queries hj em dia estão em alta.. é a mais usada.. ainda mais para fazer um site  que fique bem em vários dispositivos diferentes como por exemplo um smartphone.. tablet.. ou pc.. Eles permitem você escrever várias regras CSS sem que precise criar outro site diferente ... contudo não é a unica solução e fazer a responsividade.

 

Veja este artigo: http://blog.popupdesign.com.br/design-responsivo-grids-e-texto/

 

Que conta o uso do grid Flexivel em 960px

 

Veja este outro exemplo: http://codepen.io/chriscoyier/pen/963efb25c72c76c0c603cf88d972af59

Foi usado uma função nova no css3 chamada de calc() leia o artigo: https://css-tricks.com/a-couple-of-use-cases-for-calc/

Compartilhar este post


Link para o post
Compartilhar em outros sites
Visitante

Isso acontece porque você deve ter criado em algum editor Wysiwyg, isso não é recomendável nos dias de hoje, só se lembra de uma coisa, não se assuste quando dizem "site responsivo", pense você mesmo, "site responsivo" é o mesmo que div, table, td, object, com "100%" de largura, te sou um simples exemplo abaixo de blocos responsivos que se adaptam em qualquer resolução e celular, baixe o anexo e execute, ou então copie o código e cole no bloco de notas e salve em ".html", veja:

<!doctype html><html><head><title>Minha Empresa</title><meta name="description" content="Minha empresa vende sapatos"/><meta name="keywords" content="sapatos, baratos, comprar"/><meta http-equiv="content-type" content="text/html;charset=utf-8"/></head><body style="font-family:arial;font-size:14px;margin:0;padding:0"><div style="background:#000;color:#fff;position:absolute;top:500px;left:200px">ESSE DIV NÃO É RESPONSIVO![EXEMPLO]</div><div style="padding:20px"><div style="overflow:hidden;width:936px;margin:0 auto"><div style="float:left"><img src="https://www.google.com.br/logos/doodles/2015/copa-america-2015-finals-4787512228708352-hp.jpg" alt="Meu Logotipo" width="200"/></div><div style="float:right"><input type="text" value="Busca aqui"></div></div></div><div style="background:#008000;color:#fff;padding:20px"><div style="width:936px;margin:0 auto">Home | Contato | etc... | etc...</div></div><div style="padding:20px"><div style="width:936px;height:700px;margin:0 auto">Conteúdo do site</div></div><div style="background:#008000;color:#fff;padding:20px"><div style="width:936px;margin:0 auto">Rodapé</div></div></body></html>

Criei alguma coisa rápida acima para que você entenda como funciona. Se você quer um site responsivo, vai ter que abrir mão de editores e se aprofundar em códigos, fuja de css do tipo "fixed", "absolute" a não ser que seja elementos incorporados com relativos, espero ter ajudado, abraços.

index.html

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar agora





Sobre o Clube do Hardware

No ar desde 1996, o Clube do Hardware é uma das maiores, mais antigas e mais respeitadas publicações sobre tecnologia do Brasil. Leia mais

Direitos autorais

Não permitimos a cópia ou reprodução do conteúdo do nosso site, fórum, newsletters e redes sociais, mesmo citando-se a fonte. Leia mais

×