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.

Jak nám responzivní web rozbil obrázky

4,410 views

Published on

Ignite přednáška na Devel.cz Konferenci '14 (http://devel.cz/konference/2014)

Published in: Technology
  • Dating direct: ❶❶❶ http://bit.ly/2F7hN3u ❶❶❶
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Sex in your area is here: ❶❶❶ http://bit.ly/2F7hN3u ❶❶❶
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Be the first to like this

Jak nám responzivní web rozbil obrázky

  1. 1. web rozbil obrázky @robinpokorny Jak nám responzivní
  2. 2. d1m22.deviantart.com <body> ! <img src=“charmander.jpg"/> ! </body>
  3. 3. Rob Gill
  4. 4. edge
  5. 5. responsiveimages.org
  6. 6. Výběr dle rozlišení zařízení
  7. 7. Výběr dle velikosti viewportu
  8. 8. 50% 100% 200% 400%25%
  9. 9. Výběr dle fyzický pixel CSS pixel
  10. 10. Art direction
  11. 11. <picture> v2
  12. 12. <picture> ! <source media="(min-width: 40em)"
 srcset="big.jpg 1x, big-hd.jpg 2x”> ! <img src=“small.jpg" alt="Charmander" srcset=“small-hd.jpg 1024w, small.jpg 320w" sizes="(min-width: 20em) 33.3vw, 100vw” /> ! </picture>
  13. 13. <source sizes=… srcset=… > <picture> v2
  14. 14. “<picture> je dnes vhodný k produkčnímu nasazení.” #10Tab Atkins @
  15. 15. much readywow such code very production so clever many usecases
  16. 16. http://m.Feedbando.com/rozbil shadehikari.deviantart.com <picture> Používej již dnes!

×