Displeje typu Retinapro webdesignéry

Hardware pixel ≠ CSS pixel

Zdroj: apple.com

1px v CSS = 1 pixel na displeji? To už neplatí.

HW pixel

Hardware pixel ≠ CSS 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.

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.

Retina technicky1) Jedna verze bitmapy + zmenšení

<img … height=”50”>

HTML

CSSbackground-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í.

Retina technicky2) Dvě verze bitmapy (Retina.js)

<img src="image.png">

Normal Retina

<img src="image@2x.png">

http://retinajs.com/

@media all and (-webkit-min-device-pixel-ratio: 1.5) { .element { background-image: url('image@2x.png'); }}

.element { background-image: url('image.png');}

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.

Retina technicky3) Vektory a pseudovektory

http://css-tricks.com/video-screencasts/113-creating-and-using-a-custom-icon-font/

★ CSS3 (stíny, přechody)★ Font ikony ★ CSS3 ikony★ SVG

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.

AutorMartin Michálek

www.vzhurudolu.czwww.twitter.com/machal

Dotazy?martin@vzhurudolu.cz