Upload
sergio-aragao-kopplin
View
207
Download
0
Embed Size (px)
Citation preview
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.