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} - Como fazer o site se adaptar ao tamanho da tela
- Como fazer um site se adaptar a resolução - Melhores respostas
- Html ajustar tamanho da tela - Melhores respostas
- Dicas - Webmaster - CCM - Guide
Assine nossa newsletter!
