Design Responsivo - MobCamp 2014
Embed Size (px)
DESCRIPTION
Palestra de Design Responsivo do Sérgio Lopes na MobCamp 2014
Text of Design Responsivo - MobCamp 2014
- DESIGNRESPONSIVO POR UMA WEB NICA
- @sergio_caelum sergiolopes.org
- sergiolopes.org
- SITE MOBILE ou DESIGN RESPONSIVO?
- NO EXISTE MOBILE
- ONE WEB
- DESIGNRESPONSIVO
- LAYOUT FLUDO
- 960px 470px470px
- MEDIDAS FLEXVEIS
- MEDIDAS FLEXVEIS %,em,rem,vh
- 100% 49%49%
- PROPORES
- NUMA TELA DE 320px 100% 49% 49%
- LAYOUT CONDICIONAL
- NUMA TELA DE 320px
- .formulario, .endereco { width: 49%; } ! @media (max-width: 600px) { .formulario, .endereo { width: 100%; } } CSS
- .formulario, .endereco { width: 49%; } ! @media (max-width: 600px) { .formulario, .endereco { width: 100%; } } CSS
- CSS3 MEDIA QUERIES
- .formulario, .endereco { width: 49%; } ! @media (max-width: 600px) { .formulario, .endereco { width: 100%; } } CSS
- DESIGNRESPONSIVO FLEXVEL ADAPTVEL
- IMPLEMENTANDO DESIGNRESPONSIVO
- CRIAO PHOTOSHOP?
- CRIAO DESIGN IN THE BROWSER
- LAYOUT FLUDO
- MEDIDAS FLEXVEIS
- %
- width: 90%;
- width: 90%; 90%
- width: 90%; 90% 5% 5%
- width: 90%; 90% 5% 5% 1280px
- width: 90%; 90% 5% 5% 1280px 1152px
- width: 90%; 90% 5% 5% 1280px 1152px 54px 54px
- width: 90%; 90% 5% 5% 1280px 1152px 54px 54px 360px
- width: 90%; 90% 5% 5% 1280px 1152px 54px 54px 360px 324px
- width: 90%; 90% 5% 5% 1280px 1152px 54px 54px 360px 324px 18px 18px
- width: 90%;
- width: 90%; width: 50%; width: 50%;
- width: 90%; width: 50%; width: 50%; 33% 33% 33% 33% 33% 33%
- % font-size
- font-size: 125%;
- font-size: 125%;
- font-size: 125%; font-size: 90%;
- font-size: 125%; font-size: 90%; font-size: 150%;
- font-size: 125%; font-size: 90%; font-size: 150%;
- font-size: 125%; font-size: 90%; font-size: 150%;
16px
- font-size: 125%; font-size: 90%; font-size: 150%;
16px 20px
- font-size: 125%; font-size: 90%; font-size: 150%;
16px 20px 20px
- font-size: 125%; font-size: 90%; font-size: 150%;
16px 20px 20px 18px
- font-size: 125%; font-size: 90%; font-size: 150%;
16px 20px 20px 18px 27px
- font-size: 125%; font-size: 90%; font-size: 150%;
16px 20px 20px 18px 18px 27px
- font-size: 125%; font-size: 90%; font-size: 150%;
20px 25px 25px 22px 22px 33px
font-size: 20px; - font-size: 1.25em; font-size: .9em; font-size: 1.5em;
20px 25px 25px 22px 22px 33px
font-size: 20px; - font-size: 1.25em; font-size: 90%; font-size: 1.5em;
20px 25px 25px 22px 22px 33px
font-size: 20px; - % font-size em
- font-size: 120%; font-size: 1.2em;
margin: 1em 0; max-width: 40em;
margin: 1em 0; max-width: 40em;
margin: 1em 0; max-width: 40em;
- font-size: 1.5em;
margin: 1em 0; max-width: 40em;
margin: 1em 0; max-width: 40em;
margin: 1em 0; max-width: 40em;
- em
- rem
- font-size: 1.5rem;
- font-size: 1.5rem;
- font-size: 1.5rem; font-size: .5rem;
- font-size: 1.5rem; font-size: .5rem; font-size: 2rem;
- font-size: 1.5rem; font-size: .5rem; font-size: 2rem;
- font-size: 1.5rem; font-size: .5rem; font-size: 2rem;
16px
- font-size: 1.5rem; font-size: .5rem; font-size: 2rem;
16px 24px
- font-size: 1.5rem; font-size: .5rem; font-size: 2rem;
16px 24px 24px
- font-size: 1.5rem; font-size: .5rem; font-size: 2rem;
16px 24px 24px 8px
- font-size: 1.5rem; font-size: .5rem; font-size: 2rem;
16px 24px 24px 8px 32px
- font-size: 1.5rem; font-size: .5rem; font-size: 2rem;
16px 24px 24px 8px 8px 32px
- font-size: 1.5rem; font-size: .5rem; font-size: 2rem;
20px 30px 30px 10px 10px 40px
- font-size: 1.5rem; font-size: .5rem; font-size: 2rem;
20px 30px 30px 10px 10px 40px
- vw & vhVIEWPORT UNITS
- width: 90vw; width: 45vw; width: 45vw; 15 vw 15 vw 15 vw 15 vw 15 vw 15 vw
- PRTICA
- FLUDO...
- FLUDO... .menu { margin: 2%; width: 96%; } .menu > li { width: 33.3%; }
- FLUDO... 320px 400px
iOS 7 The mobile OS from a whole new perspe Watch the keynote Learn more
- .main img { position: relative; top: -1em; }
- .main img { position: relative; top: -1em; } ! @media (min-width: 400px) { .main img { top: -2em; } }
- .news { float: left; width: 100%; } @media (min-width: 768px) { .news { width: 50%; } } @media (min-width: 1024px) { .news { width: 25%; } }
- CSS3 MEDIA QUERIES BOAS PRTICAS
- .news { float: left; width: 100%; } @media (min-width: 768px) { .news { width: 50%; } } @media (min-width: 1024px) { .news { width: 25%; } }
