img srcset + sizes picturefill用于响应

Question

我有一个12列布局的网站，我正在尝试正确使用srcset和sizes属性来匹配我的设计。

我有一个侧箱，在桌面上有3列，但在平板电脑和移动尺寸中，它跨越12列（100％宽度）。

我想要的是桌面版中使用的图像，也可用于移动设备（最大宽度480px），以及特定的平板电脑大小的图像，用于481px和781px之间的所有内容。

这是我的代码：

<img
    src="http://placehold.it/370x150/cecece"
    srcset="http://placehold.it/768x311/f67f57 768w, http://placehold.it/370x150/cecece 320w"
    sizes="(max-width: 768px) 100vw, (max-width: 480px) 100vw"
>

在我的示例中，768版本一直使用到780px，然后使用默认的src。但是如何让它使用320版本直到480px？

Answer 1

这个怎么样：

<img  
    sizes="(min-width: 781px) 370px, 100vm"
    srcset="http://placehold.it/768x311/f67f57 768w, 
            http://placehold.it/370x311/cecece 480w"
>

它应该显示最小480px的最小图像，然后是最大780px的图像和小的图像> 780px。