picture元素无法识别2个以上不同断点图片源问题求助

问题根源在于<source>标签的顺序错误。浏览器会按从上到下的顺序匹配第一个满足media条件的资源，当前代码里min-width:560px的条件在屏幕宽度≥1024px时依然成立，所以浏览器会优先加载第一个source的图片，完全不会触发后面的1024px断点规则。

修复后的代码： #

<picture>
    <source type="image/png" srcset="/img/section1-img7.png" media="(min-width: 1024px)" width="702" height="600">
    <source type="image/png" srcset="/img/section1-img8.png" media="(min-width: 560px)" width="441px" height="374px">
    <img class="recorder-img" src="/img/section1-img5.png" width="283" height="240">
</picture>

关键说明： #

• 必须把断点阈值更大的<source>放在前面，这样当屏幕宽度≥1024px时，会先匹配到这个规则；如果宽度在560px-1023px之间，才会匹配第二个source；小于560px则用img标签的默认图。
• 无需更换图片格式或调整其他属性，仅调整source的顺序即可解决问题。

内容的提问来源于stack exchange，提问作者watson