如何处理具有不同dpi的屏幕的图像投放？

Question

我有不同dpi的图像，如何为不同dpi的屏幕处理图像？这是我到目前为止所拥有的。

 @media only screen and (-webkit-min-device-pixel-ratio: 1.5),
    only screen and (min--moz-device-pixel-ratio: 1.5),
    only screen and (-o-device-pixel-ratio: 3/2), 
    only screen and (min-device-pixel-ratio: 1.5) {

        //high resolution images go here

    }

这是处理具有不同dpi的图像的正确方法吗？

Answer 1

与视网膜结合使用处理不同图像大小（响应）的最佳方法是使用scrset / sizes，在这里，您需要将其需要保留的浏览器信息交给哪个，这才是最好的图像。

https://ericportis.com/posts/2014/srcset-sizes/

<img src="small.jpg"
 srcset="large.jpg 1024w,
         medium.jpg 640w,
         small.jpg 320w"
 sizes="(min-width: 36em) 33.3vw,
        100vw"
 alt="Alttext" />

例如此图像的宽度为视口（33.3vw）的33.3％，当视口大于36em时（此处可能为像素值）。浏览器将计算当前视口尺寸需要多少像素（还包括屏幕的dpi），然后从给定的图像大小中进行选择，以获取最合适的图像。