Quando estamos trabalhando com design responsivo precisamos ter em mente que nosso site poderá ser aberto em diferentes dispositivos (desktops, notebooks, celulares, tablets, etc), e que todos eles tem os mais diferentes tamanhos e resoluções, o que pode comprometer a usabilidade caso não levemos isso em conta.
Para trabalhar com os mais diferentes dispositivos utilizando um único código o CSS nos ajuda com as Media Queries. Para entender sobre os Media Queries é necessário entender um pouco sobre os Media Types.
Media Types, falando de uma forma mais prática possível, são os diferentes tipos de mídia na qual um site pode ser aberto e, portanto, nas diferentes formas que seu layout pode ser formatado para ser melhor apresentado. Abaixo estão alguns dos exemplos de Media Types que conhecemos:
- all: este valor é usado para que o código CSS seja aplicado para todos os dispositivos;
- braille: para dispositivos táteis;
- embossed: para dispositivos que imprimem em Braille;
- handheld: para dispositivos de mão, celulares e outros dispositivos deste perfil. Normalmente com telas pequenas e banda limitada;
- print: para impressão em papel;
- projection: para apresentações, como PowerPoint;
- screen: para dispositivos com telas coloridas e alta resolução;
- speech: para sintetizadores de voz. O CSS 2 tem uma especificação de CSS chamada Aural (http://www.w3.org/TR/CSS2/aural.html) que podemos “formatar” a voz de leitores de tela e outros sintetizadores;
- tty: para dispositivos que utilizam uma grade fixa para exibição de caracteres, como teletypes, terminais, dispositivos portáteis com display limitado;
- tv: para dispositivos como televisores, ou seja, com baixa resolução, com boa quantidade de cores e scroll limitado.
Voltando para os Media Queries, eles fazem uso dos Media Types para "decidir" de que forma o CSS será lido quando for carregado. Para nossos exemplos o Media Type utilizado será o "screen".
Bem, vamos ao primeiro exemplo. Observe os códigos abaixo:
HTML:
<div class='fundo'>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eu augue lectus. Pellentesque venenatis justo eu lectus viverra, vitae faucibus erat dapibus. Vivamus dignissim eget neque semper dictum. Duis lobortis vehicula velit, non luctus lorem pharetra vitae. Maecenas convallis enim eu urna porta cursus. Cras a augue et odio scelerisque ultrices quis et mi.
</div>
<div class='fonte'>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eu augue lectus. Pellentesque venenatis justo eu lectus viverra, vitae faucibus erat dapibus. Vivamus dignissim eget neque semper dictum. Duis lobortis vehicula velit, non luctus lorem pharetra vitae. Maecenas convallis enim eu urna porta cursus. Cras a augue et odio scelerisque ultrices quis et mi.
</div>
CSS:
div {
border: 1px solid #000000;
margin-bottom: 15px;
padding: 15px;
}
.fundo {
background: #FFFFFF;
}
.fonte {
color: #000000;
}
@media screen and (max-width: 640px) {
.fundo {
background: #FFFF00;
}
.fonte {
color: #FF0000;
}
}
@media screen and (max-width: 360px) {
.fundo {
background: #00FF00;
}
.fonte {
color: #0000FF;
}
}
Vamos começar pelo HTML. Conforme vimos no post sobre a metatag viewport, definimos a mesma de acordo com a largura do dispositivo: <meta name="viewport" content="width=device-width" /> . Tendo como base o Samsung Galaxy S5, que emulanos no módulo de desenvolvedor do Google Chrome, sabemos que na vertical ele tem 360px de largura, e na horizontal esse valor sobe para 640px. Com isso, nós definimos nosso código CSS para trabalhar nessas diferentes condições de tamanho. Como fazemos isso? Usando a media query "screen" e definindo uma largura máxima. Analisemos:
@media screen and (max-width: 640px) {
.fundo {
background: #FFFF00;
}
.fonte {
color: #FF0000;
}
}
Através da primeira linha, nós definimos que toda vez que estivermos num dispositivo do tipo "screen" com uma viewport de no máximo 640px, os objetos com a classe "fundo" terão o fundo amarelho (#FFFF00), e os objetos com a classe "fonte" ficarão com a fonte vermelha (#FF0000). Tendo o exemplo acima como base, vamos analisar as linhas seguintes do código abaixo:
@media screen and (max-width: 360px) {
.fundo {
background: #00FF00;
}
.fonte {
color: #0000FF;
}
}
Como agora já temos uma noção das media queries, podemos concluir que quando acessarmos o site de um dispositivo do tipo "screen" com uma viewport de no máximo 360px, os objetos da classe "fundo" ficarão com o fundo verde (#00FF00), e a fonte ficará azul (#0000FF). Veja abaixo como o código de comporta de acordo com cada tela, computador, celular na horizontal e celular na vertical, respectivamente:
Nos próximos posts, utilizando os conceitos que vimos nesse post, vamos ver exemplos de técnicas que serão interessantes para deixar nosso site mais apresentável quando abertos em diferentes dispositivos.
Nenhum comentário:
Postar um comentário