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 图像必须在 Retina 上使用，如果您只是将该图像添加到 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。

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

srcset: define a file to retina desktop

css

image

responsive-design

srcset