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

Ajustar pagina

Discussão em 'Web Development' iniciada por ti17, 26 de Fevereiro de 2009. (Respostas: 3; Visualizações: 773)

  1. ti17

    ti17 Power Member

    Boas a todos,

    é assim, eu estou a fazer uma pagina, e já está publicada, mas quando vou ver a pagina noutro pc que não seja o meu, a página fica toda diferente, sei que é por causa da resolução de cada pc que isso acontece, e o que queria saber é se alguem me sabe explicar como faço para a minha página se ajustar automaticamente a todo o tipo de resoluções,

    Por exemplo apartir de 800*600, todas as resoluções iguais ou superiores a esta.

    obg e cumpts
     
  2. Podes postar o link do site?

    Por norma não dá para ajustar assim tão bem sites a tamanhos de resolução. Podes definir dimensões fixas (por 'px') ou então por percentagem. Porém, percentagens podem dar problemas caso o utilizador use resoluções mais baixas e/ou mais altas.

    Recomendo o uso de tamanhos fixos para ecrãs de 1024x768, segundo a estatística da W3Schools 36% dos utilizadores usam esse. No entanto, 57% usam maior do que isso, porém o mais favorável aos utilizadores é pôr com o tamanho mínimo possível, já que quem tem maior resolução pode vê-los à mesmo, o mesmo não acontece ao contrário.

    Espero que o futuro fique a tender para percentagens com tamanhos mínimos ( min-width: e min-height: em CSS), mas parece que o IE7 ainda não os conheçe lá muito bem.
     
  3. O artigo no Dynamic Drive deu-me uma pequena ideia. Seria algo redundante criar um site para cada resolução, então parece compensar mais atribuir um StyleSheet diferente de acordo com a resolução (já que espero que uses CSS no teu site, ti17). Isto dará algo do género de
    Código:
    [FONT=Courier New]<script type="text/javascript">
    //<!--
    
    /*
    Informação retirada de:
    http://www.dynamicdrive.com/dynamicindex9/info3.htm
    http://cse-mjmcl.cse.bris.ac.uk/blog/2005/08/18/1124396539593.html
    */
    
    //primeiro cria a funcao que ira invocar o CSS
    function _invocarEstilo(nome_do_css) [/FONT][FONT=Courier New]{
      if ( document.createStyleSheet() ) { //isto pergunta ao browser se conhece a funcao[/FONT][FONT=Courier New]
        document.createStyleSheet('http://www.o_teu_site.pt/estilos/' + nome_do_css);
    [/FONT]  [FONT=Courier New] }[/FONT][FONT=Courier New]
      else { //senao tentara o mesmo por outros metodos[/FONT]
    [FONT=Courier New]     //primeiro é criado uma tag de 'link', dado-lhes os seus atributos e entao adicionado ao codigo[/FONT]
    [FONT=Courier New]    var newSS = document.createElement('link');
        [/FONT][FONT=Courier New]newSS.rel = 'stylesheet';
        [/FONT][FONT=Courier New]newSS.href = [/FONT][FONT=Courier New]'http://www.o_teu_site.pt/estilos/' + nome_do_css[/FONT][FONT=Courier New];
        [/FONT][FONT=Courier New]newSS.type = 'text/css';
    
        [/FONT][FONT=Courier New]document.getElementsByTagName("head")[0].appendChild(newSS);
      [/FONT][FONT=Courier New]}
    }
    [/FONT] 
    [FONT=Courier New]
    if (screen.width == 800 || screen.height == 600) //if 800x600
      _invocarEstilo('estilo_800x600[/FONT][FONT=Courier New].css[/FONT][FONT=Courier New]'); //aqui busca o css dando-lhe o nome do ficheiro que vai chamar
    
    else if (screen.width == 640 || screen.height == 480) //if 640x480
    [/FONT][FONT=Courier New]  _invocarEstilo('[/FONT][FONT=Courier New]estilo[/FONT][FONT=Courier New]_640x480[/FONT][FONT=Courier New].css[/FONT][FONT=Courier New]');[/FONT]
    [FONT=Courier New]
    else if (screen.width==1024||screen.height==768) //if 1024x768
    [/FONT][FONT=Courier New]  _invocarEstilo('[/FONT][FONT=Courier New]estilo[/FONT][FONT=Courier New]_1024x768[/FONT][FONT=Courier New].css[/FONT][FONT=Courier New]');[/FONT]
    [FONT=Courier New]
    else //if all else
    [/FONT][FONT=Courier New]  _invocarEstilo('[/FONT][FONT=Courier New]estilo[/FONT][FONT=Courier New]_grande.css');[/FONT]
    [FONT=Courier New]
    //-->
    </script>[/FONT]
     

Partilhar esta Página