响应式图片 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>