Webmaster - Adaptar um site a todas as resoluções, focá-lo

Abril 2017


Uma questão recorrente neste fórum é "Como adaptar meu site à resolução do visitante? Que resolução escolher?"

Não precisa complicar!

Como fazê-lo


Basta aplicar uma largura relativa (= que muda conforme o tamanho da janela e da tela do visitante) à página.

O mais comum é usar a tag do body.
Se você usar um div#body, ou outro, adapte-se.

Para adaptar o tamanho da página, é preciso utilizar esse código CSS:
  body{width:100%;}

Com esse código a página ocupará 100% da janela, seja qual for o seu tamanho.
Nós podemos, obviamente, definir a largura desejada (90%, 80%, etc.)
Se definirmos uma largura menor, podemos centralizá-la com "margin: auto".

Nota


/!\ Atenção: você deverá definir uma largura em % e não em "in" ou outra unidade relativa, pois % corresponde a um percentual relativo à largura da janela em vez do "in", que corresponde à altura da linha (um tamanho pré-definido).
(Você não precisa lembrar disso, se te confundir, contente-se em seguir as seguintes indicações)

Precisões


Se você quiser que sua página não seja menor que um determinado tamanho, você pode utilizar a propriedade min-width (que não funciona no IE).
Você também usar a max-width para definir o tamanho máximo.

(Eu não recomendo esta prática porque não acho bom ter uma página menor que a janela)

Exemplo


Uma largura da página de 90%, centrada, uma largura mínima de 600 pixels e uma largura máxima de 2000 pixels:

  body{width:90%;margin:auto;min-width:600px;max-width:2000px}

Outros


Alguns links para o min-width e companhia, no IE :


Tradução feita por Lucia Maurity y Nouira


Veja também

Artigo original publicado por . Tradução feita por pintuda. Última modificação: 26 de fevereiro de 2011 às 12:30 por pintuda.
Este documento, intitulado 'Webmaster - Adaptar um site a todas as resoluções, focá-lo', está disponível sob a licença Creative Commons. Você pode copiar e/ou modificar o conteúdo desta página com base nas condições estipuladas pela licença. Não se esqueça de creditar o CCM (br.ccm.net) ao utilizar este artigo.