Designer responsivo elabora sites que
forneçam uma ótima experiência de visualização, fácil leitura e navegação. Para
diversos dispositivos. Na pratica é a técnica usada para criar sites que se
adaptem a diversos dispositivos (PC, tablet, celular, etc...) .
Um site responsivo se adapta ao ambiente de
visualização usando grades proporcionais e fluídas imagens flexíveis, e mídia queres Css3.
Grade fluida basicamente é o conceito que
requer que as dimensões dos elementos sejam definidos por unidades relativas como
porcentagens.
Media queries permitem que a página use diferentes regras de estilo CSS com base nas
características do dispositivo onde o site será exibido.
Media Types
Eles definem pra que tipo de mídia um código é destinado, porém não são mais tão
utilizados devido a variedade de tipos de media existente hoje, são eles:
· All: Para todos os dispositivos.
· Braille: Para dispositivos táteis.
· Embossed: Para dispositivos que
imprimem em braile.
· Handheld: Para dispositivos portáteis,
geralmente com telas pequenas e banda limitada.
· Print: Para impressão em papel.
· Projection: Para apresentações como
PPS.
· Screen: Para monitores ou dispositivos
com telas coloridas e resolução adequada.
· Speech: Para sintetizadores de voz. As
CSS 2 tem uma especificação de CSS chamada Aural, onde podemos formatar a voz
dos sintetizadores.
· Tty: Para dispositivos que possuem uma
grade fixa para exibição de caracteres, tais como: Teletypes, Terminais e
também dispositivos portáteis com display limitados.
· Tv:
Para dispositivos como televisores, ou seja, com baixa resolução, quantidade de
cores e scroll limitados.
O grande problema com essas definições é
que, por exemplo, um Iphone apesar de
ser um dispositivo portátil não é um handheld.
Media Queries
A solução pra esses problemas foi a criação
dos media queries, eles definem
condições especificas, que caso aprovadas vão ser renderizadas. Para tanto
utilizam operadores lógicos, or ,para
usar diversas mídias com o mesmo código pode ser substituído por “,” , only, mostra apenas em determinada mídia, e not, negação, :
Exemplo:
<style type=”text/css”>
@media all
and (not color) {
Body {background-color:gray}
}
</style>
No código acima foi definido que pra dispositivos que não possuam cores o
plano de fundo será cinza.
Media Features
Media fetures servem para definir as especificações da
exibição do código css. Principais características definidas em media features:
·
width largura.
·
height Altura.
·
device-width largura relativa.
·
device-height altura relativa.
·
orientation varia entre portrait(retrato) e landscape(paisagem).
·
aspect-ratio, razão de aspecto.
·
device-aspect-ratio, razão de aspecto do dispositivo.
·
color descreve o numero de bits por componente de cor de dispositivo de
saida.
·
color-index , descreve o numero de entradas na tabela de pesquisa de
cores do dispositivo.
·
monochrome, monocromático.
·
resolution resolução em dpi.
·
scan descreve o processo de digitalização de dispositivos de saída de TV
aceitando os valores progressive ou interlace.
· grid usado
para consultar se o dispositivo de saída é grid ou bitmap se o dispositivo de saída
é baseado em grid o valor será 1 caso contrário o valor será 0.
exemplo para três diferentes tipos de telas
<!DOCTYPE
html>
<html lang="pt-br">
<head>
<style
type="text/css">
body { padding: 15px;
background:#0099FF;
font-family:sans-serif }.
.teste{ border: solid 1px #999;
padding: 5px 10px;
margin: 40px; }
@media screen and (max-width: 600px) {
.um { background: white; }
}
@media screen and (min-width: 800px) {
.dois { background: green; }
}
@media screen and (min-width: 600px) and
(max-width: 800px) {
.tres { background: red; }
}
</style>
</head>
<body>
<h1> teste resolução diferente </h1>
<p>Mude o tamanho do seu navegador para
ver as mudanças.</p>
<div class="teste um">esta
linha fica branca quando a resolução maxima é 600px</div>
<div class="teste dois">essa
linha fica verde quando a resolução minima é 800px</div>
<div class="teste tres">Esta
linha fica vermelha quando a resolução está ente 600px e 800px</div>
</body>
</html>
