srcset：将文件定义到视网膜桌面

Question

这就是我的图片代码的样子：

<img 
    src="img/thumb-teste-270x190.jpg" alt="usro" 
    sizes="(max-width: 20em) 100vw, 
           (min-width: 50em) 10vw"
    srcset="img/thumb-teste-270x190.jpg 270w,
            img/thumb-teste-690x486.jpg 690w"
>

对于桌面设备，我使用小拇指（270x190）。对于移动设备，我使用大拇指（690x486）。但是，如何为视网膜桌面创建规则使用中等拇指（540x380）？

Answer 1

您不需要指定必须在视网膜上使用540x380图像，如果您只是将该图像添加到srcset，浏览器应该足够智能以确定何时使用它：

<img 
   src="img/thumb-teste-270x190.jpg" alt="usro" 
   sizes="(max-width: 20em) 100vw, 
          (min-width: 50em) 10vw"
   srcset="img/thumb-teste-270x190.jpg 270w,
           img/thumb-teste-540x380.jpg 540w,
           img/thumb-teste-690x486.jpg 690w"
>

还有good post on this。