jak nám responzivní web rozbil obrázky
DESCRIPTION
Ignite přednáška na Devel.cz Konferenci '14 (http://devel.cz/konference/2014)TRANSCRIPT
![Page 1: Jak nám responzivní web rozbil obrázky](https://reader033.vdocuments.mx/reader033/viewer/2022052601/559591f21a28abad498b46b9/html5/thumbnails/1.jpg)
web rozbil obrázky@robinpokorny
Jak nám responzivní
![Page 2: Jak nám responzivní web rozbil obrázky](https://reader033.vdocuments.mx/reader033/viewer/2022052601/559591f21a28abad498b46b9/html5/thumbnails/2.jpg)
d1m22.deviantart.com
<body> !
<img src=“charmander.jpg"/> !
</body>
![Page 3: Jak nám responzivní web rozbil obrázky](https://reader033.vdocuments.mx/reader033/viewer/2022052601/559591f21a28abad498b46b9/html5/thumbnails/3.jpg)
Rob Gill
![Page 4: Jak nám responzivní web rozbil obrázky](https://reader033.vdocuments.mx/reader033/viewer/2022052601/559591f21a28abad498b46b9/html5/thumbnails/4.jpg)
![Page 5: Jak nám responzivní web rozbil obrázky](https://reader033.vdocuments.mx/reader033/viewer/2022052601/559591f21a28abad498b46b9/html5/thumbnails/5.jpg)
edge
![Page 6: Jak nám responzivní web rozbil obrázky](https://reader033.vdocuments.mx/reader033/viewer/2022052601/559591f21a28abad498b46b9/html5/thumbnails/6.jpg)
responsiveimages.org
![Page 7: Jak nám responzivní web rozbil obrázky](https://reader033.vdocuments.mx/reader033/viewer/2022052601/559591f21a28abad498b46b9/html5/thumbnails/7.jpg)
Výběr dlerozlišení zařízení
![Page 8: Jak nám responzivní web rozbil obrázky](https://reader033.vdocuments.mx/reader033/viewer/2022052601/559591f21a28abad498b46b9/html5/thumbnails/8.jpg)
![Page 9: Jak nám responzivní web rozbil obrázky](https://reader033.vdocuments.mx/reader033/viewer/2022052601/559591f21a28abad498b46b9/html5/thumbnails/9.jpg)
Výběr dlevelikosti viewportu
![Page 10: Jak nám responzivní web rozbil obrázky](https://reader033.vdocuments.mx/reader033/viewer/2022052601/559591f21a28abad498b46b9/html5/thumbnails/10.jpg)
![Page 11: Jak nám responzivní web rozbil obrázky](https://reader033.vdocuments.mx/reader033/viewer/2022052601/559591f21a28abad498b46b9/html5/thumbnails/11.jpg)
50% 100% 200% 400%25%
![Page 12: Jak nám responzivní web rozbil obrázky](https://reader033.vdocuments.mx/reader033/viewer/2022052601/559591f21a28abad498b46b9/html5/thumbnails/12.jpg)
Výběr dlefyzický pixelCSS pixel
![Page 13: Jak nám responzivní web rozbil obrázky](https://reader033.vdocuments.mx/reader033/viewer/2022052601/559591f21a28abad498b46b9/html5/thumbnails/13.jpg)
![Page 14: Jak nám responzivní web rozbil obrázky](https://reader033.vdocuments.mx/reader033/viewer/2022052601/559591f21a28abad498b46b9/html5/thumbnails/14.jpg)
Art direction
![Page 15: Jak nám responzivní web rozbil obrázky](https://reader033.vdocuments.mx/reader033/viewer/2022052601/559591f21a28abad498b46b9/html5/thumbnails/15.jpg)
<picture> v2
![Page 16: Jak nám responzivní web rozbil obrázky](https://reader033.vdocuments.mx/reader033/viewer/2022052601/559591f21a28abad498b46b9/html5/thumbnails/16.jpg)
<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>
![Page 17: Jak nám responzivní web rozbil obrázky](https://reader033.vdocuments.mx/reader033/viewer/2022052601/559591f21a28abad498b46b9/html5/thumbnails/17.jpg)
<source sizes=… srcset=… >
<picture> v2
![Page 18: Jak nám responzivní web rozbil obrázky](https://reader033.vdocuments.mx/reader033/viewer/2022052601/559591f21a28abad498b46b9/html5/thumbnails/18.jpg)
“<picture> je dnes vhodný k
produkčnímu nasazení.”
#10Tab Atkins @
![Page 19: Jak nám responzivní web rozbil obrázky](https://reader033.vdocuments.mx/reader033/viewer/2022052601/559591f21a28abad498b46b9/html5/thumbnails/19.jpg)
much readywow
such codevery production
so clever
many usecases
![Page 20: Jak nám responzivní web rozbil obrázky](https://reader033.vdocuments.mx/reader033/viewer/2022052601/559591f21a28abad498b46b9/html5/thumbnails/20.jpg)
http://m.Feedbando.com/rozbil
shadehikari.deviantart.com
<picture>Používej
již dnes!