O documento descreve o conceito de design responsivo, que torna o conteúdo de um site adaptável a diferentes dispositivos e telas. Isso é feito através de técnicas como layouts flexíveis, media queries e plugins que ajustam imagens, vídeos e fontes. O design responsivo garante que a informação seja entregue da melhor maneira possível para o usuário, independente do dispositivo usado.
2. Ethan Marcotte
● Web Design e Developer
● Introduziu o conceito e
publicou o livro Responsive
Web Design
3. O que é Responsive Web Design?
Tornar o conteúdo adaptável a cada tipo de
dispositivo e tamanho de tela, para que a
informação seja entregue da melhor maneiro
possível.
4. Motivação
"Segundo pesquisa da consultoria britânica
Canalys, o mercado de smartphones cresceu
63% em 2011, para 488 milhões de unidades,
enquanto o de PCs teve expansão de 15%,
para 415 milhões de equipamentos."
Fonte: http://economia.estadao.com.br/noticias/economia,vendas-de-smartphones-tem-forte-alta-e-ja-superam-as-de-pcs-no-
mundo,102001,0.htm
12. Tipografia fixa
body {
font: normal normal 16px/24px Verdana, sans-serif;
}
.episodio h1 {
font: normal normal 26px/32px Arial, Helvetica;
}
.episodio p {
font-size: 14px;
line-height: 16px;
}
13. Tipografia flexível
body {
font: normal normal 100%/1.5em Verdana, sans-serif;
}
body com font-size: 100%, é renderizado como 16px de tamanho de fonte na
maioria dos browsers.
22. Media queries
Comentários condicionais no CSS que serve
para detectar o tipo de mídia que o dispositivo
está usando e quais propriedades esta mídia
possui.
24. Sintaxe e uso
[only | not]? {tipo} and ({característica}[:{valor}]?) [and ({característica}[:{valor}]?)]*
[, [only | not]? {tipo} and ({característica}[:{valor}]?) [and ({característica}[:{valor}]?)]*]
<link rel="stylesheet" href="wide.css" media="screen and (min-width: 1200px)" />
ou
@media screen and (max-width: 1200px) {
/* seu estilo aqui */
}
25. Exemplos mais complexos
@media print and (max-width: 21cm) {}
@media all and (max-width: 1024px) {}
@media only screen and (orientation: landscape)
and (min-device-width: 768px)
and (max-device-width: 1024px),
only screen and (-webkit-device-aspect-ratio: 1.5) {}