Como fazer seu site se ajustar a diferentes tamanhos de tela

A resolução das telas apresenta um problema para desenvolvedores da web. A configuração de cada computador é diferente e a resolução não é um parâmetro que não pode ser controlado por uma página da web. No entanto, a solução é usar CSS ou folhas de estilo em cascata para controlar o tamanho da sua página, dependendo do tamanho da janela do navegador. A chave é usar porcentagens na propriedade width do seu CSS. Ao usar uma porcentagem, o conteúdo do site muda de tamanho conforme a janela do navegador muda. Isso mudará com a resolução do computador ou ao redimensionar a janela do navegador.

Passo 1

Clique em “Arquivo” e depois em “Abrir” para abrir sua página da web em um editor de texto. Escolha sua página da web no menu.

Etapa 2

Localize a tag HEAD na sua página da web procurando as tags HTML e na parte superior da sua página da web.

Etapa 3

Adicione os seletores de tags CSS logo acima da tag dentro de STYLE. Pode ser o seletor “Corpo” ou um contêiner de DIV ID ou Classe, se você desejar que o conteúdo seja separado do plano de fundo do site. Por exemplo: “body {}” ou “#container {}”. Você pode adicionar ambos para controlar o tamanho dos dois elementos. Dentro de STYLE, os dois itens devem ficar assim:

Etapa 4

Adicione a propriedade width com uma porcentagem. Por exemplo, se você quiser que o corpo cubra toda a área da janela, será necessário fornecer uma largura de 100%. Se você deseja que o contêiner tenha uma margem que mostre a parte inferior, pode dar um valor de 80%. Usando o exemplo acima, o código seria “body {width: 100%;} #container {width: 80%;}”.

Referências

 

Você pode estar interessado:

Deixe um comentário