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}
Veja também
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.
1 vote - 5.0/5
2 Comentários
Parece que outro não deu certo,vou tentar de novo...
Oi. Bom dia!
Não sei se deu certo mas você me ajudou bastante.
ótimo dia pra você! Deus te abençoe sempre.
Espero que você tenha recebido meu comentário.

Assine nossa newsletter!

Assine nossa newsletter!
Junte-se à comunidade