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

Como sabemos, a resolução da tela é um fator a levar em conta quando queremos obter uma boa qualidade de imagem. Agora, como adaptar um site à resolução de tela dos usuários? Que resolução escolher? Nos últimos anos, as estatísticas indicam que a resolução mais utilizada é de 1920x1080 píxels, mas existem muitas opções. Nesse artigo, contamos o que você deve saber para ajustar seu site a diferentes resoluções.

Como adaptar um site a diferentes resoluções

Como não sabemos a resolução das telas de todos os usuários que visitarão nosso site, uma solução possível é usar as unidades relativas de CSS. Nesse caso, usaremos a porcentagem para ajustar o tamanho da página para a medida desejada de forma que ela se adapte à janela e à tela dos usuários. O mais comum é usar a tag body:

body{width:100%;}

Com essa linha de código, a página ocupará 100% da janela, qualquer que seja seu tamanho. Podemos definir o tamanho que quisermos (90%, 80% etc.) Também é possível centralizar a página com base na janela do usuário e não nos conteúdos com a propriedade margin: 0 auto. Essa função ajustará para 0 as margens superior, inferior e laterais de modo automático.

Atenção: deve-se definir o tamanho em porcentagem e não em unidades, pois o que queremos é definir uma proporção do tamanho da janela. Lembre-se que as unidades definem a altura das linhas (tamanho predefinido).

Especificações

Se é imprescindível que seu site não seja muito pequena, você pode usar a propriedade min-width para determinar a largura mínima de exibição da página. Você também pode usar max-width para definir o tamanho máximo. Porém, tome cuidado com isso, pois sua página pode acabar ficando menor que a janela, afetando a estética do site para alguns usuários.

Exemplo

Uma página configurada para largura 90%, centralizada, com largura mínima de 600 píxels e máxima de 2000 píxels deverá contar com o seguinte código:

body{width:90%;margin: 0 auto;min-width:600px;max-width:2000px}
Nosso conteúdo é produzido em colaboração com especialistas em tecnologia da informação sob o comando de Jean-François Pillou, fundador do CCM.net. CCM é um site sobre tecnologia líder em nível internacional e está disponível em 11 idiomas.
Veja também
  • Como fazer o site se adaptar ao tamanho da tela
  • Html ajustar tamanho da tela - Melhores respostas
  • Como fazer um site se adaptar a resolução - Melhores respostas
  • Dicas - Webmaster - CCM - Guide
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 (br.ccm.net) ao utilizar este artigo.

Assine nossa newsletter!

Assine nossa newsletter!
Junte-se à comunidade