image - 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"
>

这方面也有很好的帖子。