Post on 17-Jul-2015
Usando HTML5 e CSS3 para implementar interfaces responsivas
CESAR EDU TechDay 3.0
Felipe de Albuquerquefa@cesar.org.br
• Estrutura de layouts• Media Queries • Imagens responsivas• Textos responsivos• Meta tags• Usando a Meta Tag Viewport• Identificando os principais dispositivos e resoluções
Overview
Valores do Media TypeValores do Media Type
all Para todos os dispositivos
braille Para dispositivos táteis.
embossed Para dispositivos que “imprimem” em braille.
handheld Para dispositivos de mão. Normalmente com telas pequenas e banda limitada.
print Para impressão em papel.
projection Para apresentações, como PowerPoint.
screen Para monitores ou outros dispositivos com telas coloridas e com resolução adequada.
speechPara sintetizadores de voz. O CSS 2 tem uma especificação de CSS chamada Aural, onde podemos “formatar” a voz dos sintetizadores.
ttyPara dispositivos que utilizam uma grade fixa para exibição de caracteres, como por exemplo, teletypes, terminais, dispositivos portáteis com display limitado.
tv Para dispositivos como televisores, ou seja, com baixa resolução, quantidade de cores e scroll limitado.
Media Values
Feature Definition Accepts min/max?
width width of display area/viewport yes
height height of display area/viewport yes
device-width width of device rendering surface yes
device-height height of device rendering surface yes
orientation portrait or landscape no
aspect-ratio ratio of display’s width to height (16:9, 4:3) yes
device-aspect-ratio ratio of device rendering surface width to height (16:9, 4:3) yes
color number of bits per color component of the output device yes
color-index number of entries in the color lookup table of the output device yes
monochrome number of bits per pixel in a monochrome frame buffer (0 for non-monochrome devices)
yes
resolution resolution of the output device (pixel density; 72dpi, 300dpi) yes
scan progressive or scan for tv devices no
grid grid or bitmap (phone display with one fixed font; tty terminal) no
Amenizar os problemas de performance
• Usar Media Queries para servir imagens diferentes quando necessário
• Comprimir as imagens o máximo possível em um editor gráfico
• Usar o conceito de Font Icons para substituir todos os ícones
• Fazer o máximo possível com CSS3
Unidades de medida e conversõesFazendo a conversão entre PX, EM, %, and PT
Unidades de medida e conversões
PX para EM
Fórmula size in pixels / parent size in pixels
Exemplo 12px / 16px = .75em
PX para %
Fórmula size in pixels / parent size in pixels * 100
Exemplo 12px / 16px * 100 = 75%
PX para PT
Fórmula size in pixels * (points per inch / pixels per inch)
Exemplo 16px * (72pt / 96px) = 12pt
EM para PX
Fórmula size in EMs * parent size in pixels
Exemplo 75em * 16px = 12px
EM para %
Fórmula size in EMs * 100
Exemplo 75em * 100 = 75%
Valores do content
Valor Descrição
widthDefine uma largura para o viewport. Os valores podem ser em PX ou “device-width”, que determina automaticamente um valor igual a largura da tela do dispositivo.
heightDefine uma altura para o viewport. Os valores podem ser em PX ou “device-height”, que determina automaticamente um valor igual a altura da tela do dispositivo.
initial-scale Define a escala inicial do viewport.
user-scalableDefine a possibilidade de o usuário fazer “zoom” em um determinado lugar da tela. É ativado quando o usuário bate duas vezes com o dedo em um lugar da tela.
Viewport size Apple family
Device Name Platform Pixel Density
Screen Size
Portrait Viewport Width
Landscape Viewport Width
Apple iPad iOS 132dpi 9.7" 768 1024
Apple iPad 2 iOS 132dpi 9.7" 768 1024
Apple iPad 3 (and 4)
iOS 264dpi 9.7" 768 1024
Apple iPad Mini iOS 163dpi 7.9" 768 1024
Apple iPhone 3G iOS 163dpi 3.5" 320 480
Apple iPhone 3GS iOS 163dpi 3.5" 320 480
Apple iPhone 4 iOS 326dpi 3.5" 320 480
Apple iPhone 4S iOS 326dpi 3.5" 320 480
Apple iPhone 5 iOS 326dpi 4" 320 568
Apple iPod Touch iOS 163dpi 3.5" 320 480
Viewport size Samsung family
Device Name Platform Pixel Density Screen Size Portrait Viewport Width
Landscape Viewport Width
Samsung Galaxy Ace Android 165dpi 3.5" 320 480
Samsung Galaxy Ace 2 Android 246dpi 3.8" 320 533
Samsung Galaxy Grand Android 187dpi 5" 480 800
Samsung Galaxy Note Android 285dpi 5.3" 400 640
Samsung Galaxy Note 2 Android 267dpi 5.5" 360 640
Samsung Galaxy Note 10.1 Android 149dpi 10.1" 800 1280
Samsung Galaxy S2 Android 217dpi 4.3" 320 533
Samsung Galaxy S3 Android 306dpi 4.8" 360 640
Samsung Galaxy S3 Mini Android 233dpi 4" 360 640
Samsung Galaxy S4 Android 441dpi 5" 360 640
Samsung Galaxy S4 Mini Android 256dpi 4.3" 360 640
Samsung Galaxy Tab 2 7.0 Android 170dpi 7" 600 1024
Samsung Galaxy Tab 7 Android 170dpi 7" 600 1024
Samsung Galaxy Tab 8.9 Android 170dpi 8.9" 800 1280
Samsung Galaxy Tab 10.1 Android 149dpi 10.1" 800 1280
Viewport Sizes Motorola family
Device Name Platform Pixel Density
Screen Size
Portrait Viewport Width
Landscape Viewport Width
Motorola Defy Android 265dpi 3.7" 320 569
Motorola Droid3 Android 275dpi 4" 360 599
Motorola Droid Razr Android 256dpi 4.3" 360 640
Motorola Milestone Android 265dpi 3.7" 320 569
Motorola Razr HD 4G
Android 312dpi 4.7" 360 598
Motorola Razr M 4GAndroid 312dpi 4.7" 360 598
Motorola Xoom Android 149dpi 10.1" 800 1280
Motorola Xoom 2 Android 149dpi 10.1" 800 1280
Identificando a orientação do dispositivo
iPads (landscape) @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {/* Regras CSS*/}
Device aspect ratio
iPhone < 5:@media screen and (device-aspect-ratio: 2/3) {} iPhone 5:@media screen and (device-aspect-ratio: 40/71) {} iPad:@media screen and (device-aspect-ratio: 3/4) {}
iPad em portrait & landscape
iPad em portrait & landscape @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) { /* STYLES GO HERE */} iPad em landscape @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) { /* STYLES GO HERE */} iPad em portrait @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) { /* STYLES GO HERE */ }