Picturefill + picture Tags for compatibility great responsive pictures Adaptive screen size

Polyfill It's a thing to do with the browser compatibility issue, the <picture></picture> tag that's used, not all browsers support it, for better compatibility, here's the thing. It can provide some alternative ways when the browser does not support, for the responsive picture, the famous Picturefill Library can implement a strong compatibility of ' responsive ' picture, for browsers that do not support pictures, it will use JS to get the srcset behind the settings, and then decide what kind of image to output

How to use

Introduction of JS file (available for download from cdnjs.com)

<src= "Js/vendor/picturefill.min.js"></script  >

Take a look at the introduction of pictures using the Picture property

< Picture>       <SourceSrcset= "Img/ad001-l.png"Media= "(min-width:50em)">       <SourceSrcset= "Img/ad001-m.png"Media= "(min-width:30em)">       <imgsrc= "Img/ad001.png"alt= "2015 Annual report"></ Picture>

The code above means that

Above 800px (normal screen and large screen) use large image ad001-1.png,

481px-800px (medium screen) uses medium picture ad001-m.png,

Less than or equal to 480px (small screen) when the default picture is used Ad001.png

The effect is as follows

Big screen

Medium screen

Small screen

Picture can have a lot of source, the media query defines the screen size to load, Srcset is the corresponding load address (50em = 50*16 =800px);

The last word of the IMG tag is the default loaded image.

Picturefill + picture Tags for compatibility great responsive pictures Adaptive screen size