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

Dezembro 2016


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 :
Este documento, intitulado « Webmaster - Adaptar um site a todas as resoluções, focá-lo »a partir de CCM (br.ccm.net) está disponibilizado sob a licença Creative Commons. Você pode copiar, modificar cópias desta página, nas condições estipuladas pela licença, como esta nota aparece claramente.