Responsivo

RESPONSIVO!!

Sérgio Aragão Kopplin

Desenvolvedor Renascentista

http://koppl.in

Sérgio Aragão Kopplin

Desenvolvedor Renascentistahuman

o

Sérgio Aragão Kopplin

Desenvolvedor Renascentistahuman

o

Sérgio Aragão Kopplin

Desenvolvedor Renascentistahuman

o

Sérgio Aragão Kopplin

Desenvolvedor Renascentista

humano

Sérgio Aragão Kopplin

Desenvolvedor Renascentista

humano

VELHOS TEMPOS DA WEB!

poucos tinham acesso,

poucos tamanhos de tela.

640x480 800x60

01024x7

68

Um pouco do cenário atual:Hoje, a Web é:

~> amplamente consumida;

~> tem crescimento exponencial;

~> explora novas tecnologias;

~> acessada por diversos dispositivos;Logo:

~> MUITOS tamanhos de telas, tipos de dispositivos, larguras de banda, tipos de portabilidade, etc.

“MUITOS TAMANHOS DE

TELAS”!!!

E o que é responsivo?

Tudo começou com um artigo do blog “A List Apart” assinado por Ethan Marcotte no começo de 2010.

tela > 1400

tela entre: 960 ~ 1400

tela entre: 450 ~ 960

tela < 450

#COMOFAZ? Media Queries!

‘Setando’ o background padrão:

div {…background-image: url(../imagem+1700.png);…

}

‘Setando’ para maiores de 960 e menores que 1400:

@media (min-width: 961px) and (max-width: 1400) {div {

…background-image: url(../imagem+1400.png);…

}}

‘Setando’ para maiores de 960 e menores que 1400:

@media (min-width: 451px) and (max-width: 960) {div {

…background-image: url(../imagem-960.png);…

}}

‘Setando’ para maiores de 960 e menores que 1400:

@media (max-width: 450px) {div {

…background-image: url(../imagem-450.png);…

}}

Resumindo:> 1401: imagem-1700.png;> 961 && < 1400: imagem-1400.png;> 451 && < 960: imagem-960.png;< 450: imagem-450.png.

tela < 768 tela >

768

Estrutura HTML

body~ header

~ logo~ menu

~ section~ título / texto~ lista de artigos

~ item da lista~ texto

~ rodapé~ texto

Arquivos Less:~ less/base.less~ less/style.less

Arquivo JS:~ js/less.min.js

Repositório:source ~ branch master:github.com/sergiokopplin/responsivo-catho

live ~ branch gh-pages:sergiokopplin.github.io/responsivo-catho/

Variáveis:

EM:A unidade de medida de comprimento em referencia-se ao tamanho da fonte (letra) do seletor onde for declarada.

em = base de pixels * ele mesmo

body ~ font-size: 16px2em = 16 x 2 = 32px

Começando os trabalhos:

Helper:

Section principal:

Header:

Artigos:

Artigos:

Rodapé:

Resumo:

Referências:1. alura.com.br/course/responsivo2. blog.popupdesign.com.br/design-responsivo-i-o-que-e-e-

por-que-usar/3. alistapart.com/article/responsive-web-design4. tableless.com.br/bem-um-novo-metodo-para-seu-css/5. getbem.com/introduction/6. tableless.com.br

/oocss-smacss-bem-dry-css-afinal-como-escrever-css/7. en.bem.info/method/8. mediaqueri.es/9. tableless.com.br/design-responsivo-na-pratica-do-

rascunho-ao-digita/10.maujor.com/tutorial/medidascss.php

Obricatho.