Webmaster: adaptar um site a todas as resoluções

Faça uma pergunta
Uma questão recorrente no nosso fórum é Como adaptar meu site à resolução do visitante? Que resolução escolher?.

Como adaptar um site a todas as resoluções

A solução é usar tamanhos relativos na página (que mudam de acordo com o tamanho da janela e da tela dos usuários). O mais comum é usar a tag do body.
Mas também podemos usar o div#body ou outro.


Para adaptar o tamanho da página, é preciso utilizar o seguinte código CSS:


body{width:100%;}

Com esse código, a página ocupará 100% da janela, seja qual for o tamanho. Obviamente, nós podemos definir o tamanho desejado (90%, 80% etc.). Se definirmos um tamanho menor, podemos centrar a página com margin: auto".

Observação: você deverá definir o tamanho em porcentagem e não em outra unidade relativa.

Exemplo

Uma página com largura de 90%, centrada e com uma largura mínima de 600 pixels e máximo de 2.000 pixels:


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

Foto: © Pixabay.
Jean-François Pillou

Jean-François Pillou - Fundador do CCM
Mais conhecido como Jeff, Jean-François Pillou é o fundador do CommentCaMarche.net. Ele também é CEO do CCM Benchmark e diretor digital do Grupo Figaro.

Mais informações sobre a equipe do CCM

Veja também