Jean Carlo Emer github.com/jcemer twitter.com/jcemer speakerdeck.com/jcemer artesão da internet Marcelo Oliveira github.com/askoth twitter.com/askoth front-end mothafucka
user-scalable=no”> HTML Code Desabilita o pinch zoom que, por padrão, é habilitado 90% das vezes que a pagina não tem pinch zoom é porque foi mal feita! Mobile Viewport Pinch Zoom
Tamanho da Fonte Não existe especificação para o tamanho básico da fonte, o aplicativo escolhe o mais adequado. Geralmente é 16px Tamanhos de fonte xx-small, x-small, small, medium, large, x-large, xx-large
Texto Fluído conteúdo que se adequa à viewport seguindo suas dimensões conteúdo que se adequa à viewport seguindo suas conteúdo que se adequa à viewport uindo
regras de estilo específicas aplicadas a diferentes dimensões de viewport CSS Code @media only screen and (max-width: 550px) { ! .container { ! ! font: 14px 'Comic Sans'; ! ! color: red; ! } } Media Queries 500px
solução via JavaScript Substituir posteriormente (via JavaScript) a imagem de nitidez mediana para uma mais adequada ao dispositivo A desvantagem é que o usuário precisará fazer o download de duas imagens e terá sua experiência visual afetada
solução por escalamento Criar uma imagem de dimensão maior que a utilizada e de muito pouca qualidade Depois de reescalada, a nitidez pode ser até igual a de retina mas o bitmap gigantesco ficará ocupando memória do navegador
Layout responsivo: CSS Escreva o estilo geral para mobile e media queries para cada dispositivo de resolução maior CSS Code /* Styles to mobile */ /* a bit wider */ @media screen and (min-width: ...em) { /* Styles */ } /* wider */ @media screen and (min-width: ...em) { /* Styles */ }
Layout responsivo: fonte Altere o tamanho de fonte de acordo com o dispositivo CSS Code /* Styles to mobile */ .body { font-size: 23px; } p { font-size: 0.8em; } /* wider */ @media screen and (min-width: ...em) { .body { font-size: 16px; } } p { font-size: 0.8em; }
Layout responsivo: grade fluída Evite a criação de muitos breakpoints, lembre-se que grade fluída é sua aliada Grade fluída é mais simples e facilita a manutenção 62% 34% 62% 34%
Layout responsivo: imagens Tente achar um tamanho que fique com nitidez razoável na maior parte dos dispositivos ou aplique uma das técnicas anteriores até que exista uma solução melhor