28.04.2013 Views

O que é o RWD?

O que é o RWD?

O que é o RWD?

SHOW MORE
SHOW LESS

Create successful ePaper yourself

Turn your PDF publications into a flip-book with our unique Google optimized e-Paper software.

Responsive Web Design CSS media <strong>que</strong>ries<br />

O tru<strong>que</strong> principal para garantir <strong>que</strong> o desenho se adapta ao tamanho disponível –<br />

usa-se o CSS (<strong>que</strong> <strong>é</strong> consultado dinamicamente) para carregar novas definições do<br />

layout de acordo a largura do viewport.<br />

Tamanhos comuns<br />

• 320px - mobile portrait<br />

• 480px - mobile landscape<br />

• 600px - small tablet<br />

• 768px - tablet portrait<br />

• 1024px - tablet landscape/netbook<br />

• 1280px - desktop<br />

Media <strong>que</strong>ries<br />

@media screen and (max-width: 480px) {}<br />

@media screen and (max-width: 650px) {}<br />

@media screen and (max-width: 980px) {}

Hooray! Your file is uploaded and ready to be published.

Saved successfully!

Ooh no, something went wrong!