1. Este site usa cookies. Ao continuar a usar este site está a concordar com o nosso uso de cookies. Saber Mais.

Script para auto ajustar a pagina de acordo com a resolução

Discussão em 'Web Development' iniciada por _M4st1c_, 27 de Agosto de 2008. (Respostas: 24; Visualizações: 11610)

  1. _M4st1c_

    _M4st1c_ Power Member

    Isto como é meio programação meio web, decidi postar aqui.

    Queria um script para auto ajustar a pagina de acordo com a resolução de cada visitante da pagina? (script em javascript)

    por exemplo
    800x600 ela ajusta-se..
    1024x768 ela ajusta-se..

    podem-me ajudar?

    Cumps ;)
     
  2. Kayvlim

    Kayvlim Undefined Moderator
    Staff Member

    Está na secção correcta :)

    Não podes usar apenas CSS para "ajustar" a página? Usando percentagens, como 75% para uma tabela, faz com que as coisas tenham um tamanho relativo, e aparece igualmente bem em ambas as resoluções.
     
  3. hostmake

    hostmake Power Member

    Usa percentagens, javascript pode não estar ligado.. e se tiveres percentagens é melhor que contas com valores absolutos.

    A não ser que tenhas 1 objecto flash e seja esse que queres redimensionar, ai não tens outra hipótese, mas não me parece o caso, faz como te disseram.
     
  4. _M4st1c_

    _M4st1c_ Power Member

    Explica-te melhor, que não percebo muito disto.

    cumps ;)
     
  5. rpnetwork

    rpnetwork Power Member

    LOL...
    é bastante simples.
    por exemplo tens uma tabela e queres que ela ocupe 50 % do espaço da página
    em vez de pores um valor em (pt) metes %
    exemplo:
     
  6. _M4st1c_

    _M4st1c_ Power Member

    com isso estas-me a dizer que 600px é igual a 50%? ou é so para explicar?

    cumps ;)
     
  7. Kayvlim

    Kayvlim Undefined Moderator
    Staff Member

    Ele estava só a explicar.
    Em vez de uma tabela ocupar exactamente 600px numa resolução 800x600 e exactamente 960px numa resolução 1280x1024, podes fazer com que essa tabela ocupe exactamente 75% (800 * 75/100 = 600, e 1280 * 75/100 = 960), e qualquer que seja a resolução, ela terá o mesmo tamanho relativo.

    Uma medida em percentagem não é uma medida exacta. 10% de 200 é 20, mas 10% de 5000 é 500. 25% de 500 é 125 e 25% de 2000 é 500.

    Queres que a página seja dimensionada conforme a resolução, certo? Então, como exemplo, troca onde diz <body> por <body><div style="width: 75%; background-color: #AAAAAA"> e onde diz </body> por </div></body>.
     
    Última edição: 27 de Agosto de 2008
  8. _M4st1c_

    _M4st1c_ Power Member

    O codigo é assim:

    <body style="background-image: url('On_the_Radio_by_anemptyhouse-1200x700.jpg')">

    </body>


    como está ai não consegui. :mad:


    No meu PC fica bem, tem resolução 1280x800. ;)

    No PC do meu irmão fica muito grande, tem resolução 1024x768.:005:

    cumps :009:
     
  9. Kayvlim

    Kayvlim Undefined Moderator
    Staff Member

    Pois, se a imagem tem de dimensões 1200x700, fica cortada horizontalmente em 1024x768.
    Nesse caso a percentagem não se aplica. O que te aconselho a fazer é redimensionares a imagem para 1080x630 (90% do tamanho original), nem que seja no paint. Assim, aparece inteira nas duas resoluções.

    Depois muda o nome da imagem para "On_the_Radio_by_anemptyhouse-1080x630.jpg", só mesmo para fazer sentido, e muda o código do teu <body> para
    Código:
     <body style="background: url('On_the_Radio_by_anemptyhouse-1080x630.jpg') no-repeat fixed center;">
     
  10. _M4st1c_

    _M4st1c_ Power Member

    assim fica mal no meu monitor, porque fica tipo duas colunas de cada lado brancas, não há maneira de resolver isso?

    cumps ;)
     
  11. Kayvlim

    Kayvlim Undefined Moderator
    Staff Member

  12. hYpe

    hYpe [email protected] Member

    Tendo em conta que existem dezenas de resoluções diferentes, acho que a solução para o teu caso, passa por teres uma imagem relativamente grande (ajustada p.e. para 1024*768), e colocares uma cor sólida como fundo...

    Um preto, branco, laranja, azul, seja o que for que combine com a tua imagem.

    Assim, e seguindo as instruções que o Kayvlim deu:

    PHP:
    <body style="background: #FFFFFF url('On_the_Radio_by_anemptyhouse-1080x630.jpg') no-repeat fixed center;">
    Onde #FFFFFF é precisamante o código da cor de fundo que queres.
     
  13. _M4st1c_

    _M4st1c_ Power Member

    Então qual é a cor que mais se adequa a esta imagem:

    [​IMG]
     
  14. Eu fazia o seguinte,

    tens a imagem a por exemplo 1024 x 768 px centrada no ecra, cortas uma tira de 1 px de altura do fundo da imagem e usas como background do body

    assim vai parecer que é só uma imagem que se adequa a todas as resoluções
     
  15. MPalhas

    MPalhas Power Member

    penso que querias dizer "1 px de largura", assim é que se adequava melhor, pois a imagem repetia-se horizontalmente, e passava a ficar independente da largura da janela.
    isso seria o aconselhável, mas como podes ver pelo post anterior dele, não dá para fazer isso com aquela imagem. só daria com fundos mais simples
     
  16. duffy

    duffy Power Member

  17. _M4st1c_

    _M4st1c_ Power Member

    para aquelas duas resolucoes que referi anteriormente funciona na perfeição, mas agora puz na resolução 1280x1024 , fica uma barra horizontal em baixo, um pouco grossa, mais ou menos 5cm, consegues arranjar?

    cumps :p
     
  18. _M4st1c_

    _M4st1c_ Power Member

    Desculpem o double post, mas como ninguem responde tem que ser. xD

    este código devia dar?



    E este?

     
    Última edição: 28 de Agosto de 2008
  19. duffy

    duffy Power Member

    tens k ter calma pk ainda há quem ande a trabalhar pro bronze e não convem levar o pc... axo k te consigo orientar isso, mais logo ja te digo algo :)
     
  20. _M4st1c_

    _M4st1c_ Power Member

    ja me arranjei a minha maneira.

    Obrigada a todos!! :007:
     

Partilhar esta Página