如何让<picture>元素在移动设备上显示正确的图像？

Question

这是我的html代码

<picture>
<source
media="(max-width: 980px)"
src="/public/images/logo_small.png">
<img src="/public/images/logo_resized.png">
</picture>

我无法在移动设备上加载logo_small.png图像。我是不是遗漏了一些显而易见的东西？

Answer 1

我认为应该是最小宽度而不是最大宽度：

<picture>
<source
media="(min-width: 980px)"
src="/public/images/logo_small.png">
<img src="/public/images/logo_resized.png">
</picture>

试试看。