Na primeira edição desta rubrica foi criada a estrutura base de um Webite, limitando a largura do conteúdo a 1200 píxeis.

Hoje, utilizando media queries, será possível adaptar o conteúdo do Website a dimensões inferiores, começando agora o desenvolvimento de um Website verdadeiramente responsivo!

Nesta edição foi adicionado um slider responsivo cujo código fonte poderá ser obtido aqui. As fotos foram obtidas aqui cuja largura foi reduzida para 1200 píxeis, uma vez que esse é a largura máxima da nossa página. Foi ainda adicionado um título, onde o seu tamanho de letra dependerá da largura da página.

Tenha em atenção que a largura da página não é igual à largura da resolução do dispositivo. Assim, se colocar um smartphone com um ecrã Full HD na horizontal, a dimensão da página não será a mesma que obterá num computador com a mesma resolução. Por exemplo o Nexus 5 tem essa resolução de ecrã, mas a dimensão da página em modo paisagem (horizontal) seria 598 píxeis, ao invés dos 1920px. Para que este efeito aconteça, deverá ser inserida a meta tag viewport com o conteúdo width=device-width.

As alterações mencionadas estou traduzidas no código HTML abaixo:

    
        
        
        
    
    
        

            
O meu website
            

                

                

                

            
        
        
        
        
    

Relativamente ao CSS, para além das media queries efectuaram-se algumas alterações mínimas, simplesmente com o propósito de uma melhor aparência:

body,html{
    margin:0px;
    padding:0px;
}
body{
    background-color:#DDD;
}
.wrapper{
    max-width:1200px;
    width:100%;
    background-color:white;
    margin:auto;
    margin-top:20px;
}
h1{
    text-align:center;
    margin:0px;
    padding:10px 0px;
    font-size:42px;
    color:#333;
}

As media queries referidas anteriormente, foram:

@media only screen and (max-width: 1200px) {
    .wrapper{
        margin-top:0px;
        padding:0px 10px;
        box-sizing:border-box;
    }
}

@media only screen and (max-width: 800px) {
    h1{
        font-size:38px;
    }
}

@media only screen and (max-width: 400px) {
    h1{
        font-size:34px;
    }
}

O conceito das media queries é simples: se a dimensão actual do ecrã se enquadrar em determinada condição (400, 800 ou 1200px), então o browser passará a utilizar a configuração correspondente.

Geralmente as media queries são escritas no fim do código, pois em CSS a ordem é relevante. Assim, se estivessem acima do código base que é utilizado genericamente (para qualquer resolução), as media queries seriam sobrepostas pelo código genérico. Concretamente, no nosso exemplo, o tamanho da letra do h1 seria sempre 42px.

Tenha em atenção que as dimensões deverão ficar em escala decrescente (se for max-width, se for min-width será o inverso), simplesmente por uma questão de especificação. Neste caso, por exemplo, um ecrã com 350px irá ser válido para todas as condições, porém, o tamanho de letra resultante será 34px, pois as anteriores serão sobrepostas.

Poderá visualizar o código acima em acção clicando aqui ou descarregá-lo aqui. Apesar de ainda bastante incompleto, poderá ver aqui que a página desenvolvida está já a cumprir todos os requisitos da Google.

Na próxima semana será adicionado mais conteúdo neste nosso projecto, tornando-o num site um pouco mais completo.

Sinta-se à vontade para colocar questões e apresentar sugestões do que gostaria que fosse debatido nas próximas edições. Até à próxima semana.