Ukázkové slajdy z chystaného dvoudenního školení v Ostravě — http://www.ovladnifrontend.cz/

1. Displeje typu Retina
pro webdesignéry

2. Hardware pixel ≠ CSS pixel
Zdroj: apple.com
1px v CSS = 1 pixel na displeji? To už neplatí.

3. Hardware pixel ≠ CSS pixel
HW pixel
CSS pixel
Apple displeje Retina dodává už na smartphonech, tabletech i laptopech.
1 CSS pixel = 4 HW pixely, tzn. poměr 1:2. Android zařízení mívají poměr 1:1,5–2.

4. Hardware pixel ≠ CSS pixel
Hardware pixel 480 × 320 960 × 640
CSS pixel 480 × 320 480 × 320
Naštěstí nám do CSS ty zařízení posílají přepočítané rozměry. iPhone do verze 4 má
stejné „CSS rozlišení” jako předchozí verze.

5. Retina technicky
1) Jedna verze bitmapy + zmenšení
HTML
<img … height=”50”>
CSS
background-size: 50% auto;
S nativní grafikou typu CSS stíny si prohlížeče poradí samy, ale pokud chceme
na Retině krásné fotky, musíme jim je dodat ve vyšším rozlišení.

6. Retina technicky
2) Dvě verze bitmapy (Retina.js)
Normal Retina
<img src="image.png"> <img src="image@2x.png">
.element { @media all and
background-image: url('image.png'); (-webkit-min-device-pixel-ratio: 1.5) {
} .element {
background-image: url('image@2x.png');
}
}
http://retinajs.com/
Pokud máme bitmapovou grafiku v CSS, ve dvojnásobné velikosti ji můžeme dodat
s media-query podmínkou (min-device-pixel-ratio: 1.5) nebo pomocí Retina.js.

7. Retina technicky
3) Vektory a pseudovektory
★ CSS3 (stíny, přechody)
★ Font ikony
★ CSS3 ikony
★ SVG
http://css-tricks.com/video-screencasts/113-creating-and-using-a-custom-icon-font/
http://icomoon.io/app/
http://nicolasgallagher.com/pure-css-gui-icons/
Jak je vidět, s bitmapami jsou na displejích typu Retina komplikace. Tam
kde to má smysl je lepší používat pseudovektory.

8. Autor
Martin Michálek
www.vzhurudolu.cz
www.twitter.com/machal
Dotazy?
martin@vzhurudolu.cz