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

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.

Veja também

Artigo original publicado por jak58. Tradução feita por pintuda. Última modificação: 28 de novembro de 2017 às 12:09 por Pedro.CCM.
Este documento, intitulado 'Webmaster: adaptar um site a todas as resoluções', 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 (https://br.ccm.net/) ao utilizar este artigo.
Definir uma altura vertical e relativa a um elemento
Criar um DIV com transparência