Responsywne obrazki. Media queries to hack?
-
Upload
the-software-house -
Category
Software
-
view
201 -
download
0
Transcript of Responsywne obrazki. Media queries to hack?
15% RUCHU W SIECI DOTYCZY KOTÓW
http://www.breitbart.com/blog/2013/09/02/15-of-all-internet-traffic-is-cat-related/
O CZYM WIE…
developer przeglądarka
rozmiar okna nie tak
rozmiar obrazka w zależności od rozmiaru okna tak nie
gęstość pikseli ekranu nie tak
rozmiar obrazka tak nie
https://ericportis.com/posts/2014/srcset-sizes/
JAK JEST DZIŚ
<img srcset="lg.jpg 1024w, md.jpg 640w, sm.jpg 320w" sizes="(min-width: 36em) 33.3vw, (min-width: 40em) calc(100vw - 300px), 100vw” src=“fallback.jpg" alt=“Hello!”>
<picture> <source media="(min-width: 40em)" type="image/webp" srcset="big.webp 1x, big-hd.webp 2x”> <source type="image/webp" srcset="small.webp 1x, small-hd.webp 2x”> <source media="(min-width: 40em)" srcset="big.jpg 1x, big-hd.jpg 2x"> <source srcset="small.jpg 1x, small-hd.jpg 2x”> <img src="fallback.jpg" alt=“Hello!"> </picture>
img + srcset picture
O CZYM WIE…
developer przeglądarka
rozmiar okna nie tak
rozmiar obrazka w zależności od rozmiaru okna tak
nie tak (dzięki sizes)
gęstość pikseli ekranu nie tak
rozmiar obrazka taknie
tak (dzięki srcset)
https://ericportis.com/posts/2014/srcset-sizes/
NOWY IMG
<img srcset="lg.jpg 1024w, md.jpg 640w, sm.jpg 320w" sizes="(min-width: 36em) 33.3vw, (min-width: 40em) calc(100vw - 300px), 100vw”
src=“fallback.jpg" alt="Hello!">
SRCSET
Wielkość obrazka źródłowegosrcset="lg.jpg 1024w, md.jpg 640w, sm.jpg 320w"
Gęstość ekranusrcset="normal.jpg 1x, retina.jpg 2x"
SIZES
sizes="(min-width: 36em) 33.3vw, (min-width: 40em) calc(100vw - 300px), 100vw"
warunek @media rozmiar obrazka na ekranie
PICTURE<picture>
<source media="(min-width: 40em)" type="image/webp" srcset="big.webp 1x, big-hd.webp 2x”> <source type="image/webp" srcset="small.webp 1x, small-hd.webp 2x”> <source media="(min-width: 40em)" srcset="big.jpg 1x, big-hd.jpg 2x"> <source srcset="small.jpg 1x, small-hd.jpg 2x”> <img src="fallback.jpg" alt=“Hello!"> </picture>
PODSUMOWUJĄC<img> + srcset/sizes
• dokładnie ten sam obrazek
• prostota użycia
<picture>
• art directing,
• dobór formatu pliku,
• więcej kodu
WSPARCIE PRZEGLĄDAREK
IE 11 Firefox 39 Chrome 43 Safari 8 iOS Safari 8.3 Chrome for Android 42
picture ✓ ✓ ✓
srcset (w Edge) ✓ ✓ ✓* ✓* ✓
CZEGO UŻYĆ W ZAMIAN• https://github.com/scottjehl/picturefill
Lorem ipsum dolor12.03.2015
Lorem ipsum dolor12.03.2015
Lorem ipsum dolor12.03.2015
Lorem ipsum dolor12.03.2015
CAT FOUND ON THE PLUTO!!!
BREAKING NEWS!!! BREAKING NEWS!!! BREAKING NEWS!!!
MEDIA QUERIES
• zachowanie elementu zależy tylko od wielkości okna przeglądarki
• nie można stworzyć biblioteki responsywnych, przenośnych modułów
.element:media( max-width: 399px ) { width: 400px; }
.element:media( min-width: 400px ) { width: 399px; }
CZEGO UŻYĆ W ZAMIAN• https://github.com/marcj/css-element-queries
CZEGO UŻYĆ W ZAMIAN• https://github.com/tysonmatanich/elementQuery
CZEGO UŻYĆ W ZAMIAN• https://github.com/ResponsiveImagesCG/cq-demos