Retina Display - Tela com alta densidade de pixels
-
Upload
juan-pujol -
Category
Design
-
view
1.188 -
download
0
description
Transcript of Retina Display - Tela com alta densidade de pixels
Retina DisplayTelas com alta densidade de pixels
Telas com alta densidade de pixels
http://imageshack.us/photo/my-images/203/2222u.png/sr=1
“Because the Retina display's pixel density is so high, your eye is unable to distinguish individual pixels.” - Apple Inc.
Apple e o restoO termo Retina Display foi anunciado pela Apple. Porém, isso não quer dizer que são os únicos com a tecnologia.
Nexus One (1.5) Galaxy S II (1.5) Galaxy Nexus (2)
CSS Pixel RatioÉ bem diferente dos pixels reais do dispositivo. 100px sempre serão 100px com CSS Pixel Ratio.
http://migre.me/9kefdA pixel is not a pixel is not a pixel
Media Queries@media only screen and (-moz-min-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 3/2), only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) { ...}
@media only screen and (-moz-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) { ...}
1.5 pixel ratio
2.0 pixel ratio
var dpr = 1;if(window.devicePixelRatio !== undefined) dpr = window.devicePixelRatio;
Javascript
LayoutsAlgumas coisas para ter em conta quando implementar um layout “responsive” com suporte para Retina Display.
• Entenda a diferença entre as queries min-device-width e min-width.
• Aproveite o poder de navegadores de última geração.
• Use CSS para fazer degrades, cantos arredondados e sombras.
• Economize banda do jeito que puder.
• Use webfonts para seus icones.
• Estude alternativas vetoriais como SVG.
• Aprenda como funcionam os frameworks.
ImagensFique de olho no peso das imagens. Plano de dados não é barato!A menos que o projeto seja um aplicativo nativo.
#header { width:100px; height:50px; background:url(logo.png) }
@media only screen and (-moz-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) {
#header { background:url([email protected]); background-size:50%; }
}
http://migre.me/9kg0CjQuery Retina Plugin
No caso de tags <img> utilize js para substituir versões da imagem.
TipografiaNada supera um bom estudo tipográfico para seu site. Renderizar texto com qualidade também é super importante.
• Saiba escalar suas fontes.
• Aproveite as vantagens do @font-face.
• text-rendering: optimizeLegibility; para otimizar kerning e ligaduras.
• Use text-shadow, e outras propriedades em vez de imagens.
http://migre.me/9kgS4Cross-browser kerning-pairs & ligatures
Obrigado.contato@juanpujol | twitter: @juanpujol