响应式图片 picture与media使用

实现图片响应式的目的是：各种终端都需要正常显示图片；移动端应该使用更小的图片，小体积 

     <div class="ap">

            <picture>

                 //条件一  media

                <source srcset="active_1.jpg" media="(min-width: 400px) and (max-width: 800px)"> 

                //条件二  media

                <source srcset="history.png" media="(min-width: 801px) and (max-width: 1200px)">

                <source srcset="rotate_cd222.png">  //其他条件

                <img src="rotate_cd.png">  //以上不兼容是显示

            </picture>

        </div>