Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Retina displeje pro webdesignéry

1,205 views

Published on

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

  • Be the first to comment

Retina displeje pro webdesignéry

  1. 1. Displeje typu Retina pro webdesignéry
  2. 2. Hardware pixel ≠ CSS pixel Zdroj: apple.com 1px v CSS = 1 pixel na displeji? To už neplatí.
  3. 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. 4. Hardware pixel ≠ CSS pixel Hardware pixel 480 × 320 960 × 640 CSS pixel 480 × 320 480 × 320Naš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. 5. Retina technicky1) 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. 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. 7. Retina technicky 3) Vektory a pseudovektory ★ CSS3 (stíny, přechody) ★ Font ikony ★ CSS3 ikony ★ SVGhttp://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. 8. Autor Martin Michálek www.vzhurudolu.czwww.twitter.com/machal Dotazy?martin@vzhurudolu.cz

×