Site para todas as resoluções

Fernando Cardoso de Melo · 29 de junho de 2015

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.

DiF · 29 de junho de 2015

@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

Fernando Cardoso de Melo · 29 de junho de 2015

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

DiF · 29 de junho de 2015

@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/

magneel · 1 de julho de 2015

Se quiser algo para fazer automaticamente, o Bootstrap faz a responsividade automatico

http://getbootstrap.com/

4 de julho de 2015

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