Web
Design
Responsivo
Reflexões

Maurício Samy Silva
vMaujorv
O dinossauro das CSS

“Uma longa viagem
começa com um único
passo”
Lao-Tsé

Tao Te Ching
81 capítulos
Livro do caminho
e da virtude
link

April 07, 2000
linkl

Tao Te Ching - cap2
fluxo e refluxo
controle da página

May 25, 2010
link

Ethan Marcotte
Esse cara é
o Ethan!

Web design responsivo nos
oferece uma maneira de,
finalmente, "projetar para o
fluxo refluxo das coisas."

Ingredientes
 media queries

Pilares

Mobile first
Luke Wroblewski
explosão
supérfluos
funcionalidades nativas
link

Mobile first

Imagens flexíveis

<picture></picture>
22/07/2014
26/02/2013
link

<picture></picture>
38 25 34
estudo ??

<picture>
<source>
<img src alt>
</picture>
[ 0 ou + ]
[ 1 ]
Sintaxe

<source
srcset=“”
sizes=“”
media=“”
type=“”
>
Sintaxe

<picture>
<source srcset=“large.jpg”
media=“(min-width: 1000px)”>
<source srcset=“medium.jpg”
media=“(min-width: 600px)”>
<img src="small.jpg"
alt="descrição da imagem">
</picture>

<picture>
<source srcset=“large.jpg”
media=“(min-width: 1000px)”>
<source srcset=“medium.jpg”
media=“(min-width: 600px)”>
<img src="small.jpg"
alt="descrição da imagem">
</picture>

<picture>
<source srcset=“large.jpg”
media=“(min-width: 1000px)”>
<source srcset=“medium.jpg”
media=“(min-width: 600px)”>
<img src="small.jpg"
alt="descrição da imagem">
</picture>

<picture>
<source srcset=“large.jpg”
media=“(min-width: 1000px)”>
<source srcset=“medium.jpg”
media=“(min-width: 600px)”>
<img src="small.jpg"
alt="descrição da imagem">
</picture>

http://livrorwd.com.br