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) 为 Retina 桌面创建规则？

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