O que é a versão adaptativa da página?

O layout responsivo é uma abordagem no desenvolvimento web em que o design e o conteúdo da página se ajustam automaticamente ao tamanho da tela do dispositivo do utilizador (desktop, tablet, smartphone).

Princípios básicos:

• Grelha flexível (Fluid Grids): Uso de percentagens ou outras unidades relativas para definir tamanhos de elementos em vez de pixels fixos.
• Imagens flexíveis (Flexible Images): Redimensionamento proporcional das imagens para que não ultrapassem o contêiner.
• Consultas de mídia (Media Queries): Regras CSS que permitem aplicar estilos diferentes consoante as características do dispositivo, como largura de ecrã, altura, orientação e resolução.

Exemplo de uso de uma consulta de mídia em CSS:

/* Estilos gerais para todos os dispositivos */
body {
    font-size: 16px;
}

/* Estilos para ecrãs com até 768px de largura (por exemplo, tablets e telemóveis) */
@media (max-width: 768px) {
    body {
        font-size: 14px;
    }
    nav {
        /* Exemplo de alteração do layout de navegação */
        display: flex;
        flex-direction: column;
    }
}

/* Estilos para ecrãs com até 480px de largura (por exemplo, telemóveis) */
@media (max-width: 480px) {
    body {
        font-size: 12px;
    }
    img {
        /* Imagens ocupam toda a largura do contêiner */
        max-width: 100%;
        height: auto;
    }
}

O objetivo do layout responsivo é garantir a facilidade de uso do site em qualquer dispositivo sem necessidade de criar versões separadas das páginas.

Testes de versão responsiva incluem verificar:

• A exibição correta dos elementos em diferentes resoluções.
• A facilidade de navegação e interação.
• A ausência de rolagem horizontal.
• A legibilidade do texto.
• O desempenho de carregamento da página.