为多个设备和多个像素密度加载响应式标题图像答案

【问题标题】：Loading responsive header images for multiple devices and multiple px densities为多个设备和多个像素密度加载响应式标题图像
【发布时间】：2018-01-07 17:35:31
【问题描述】：

我在 Sketch 中完成的设计有 3 种不同的布局。每个设计都有一个标题图像，如下所示：

在不同的设备上，我加载不同的图像以检查高度并裁剪图像。当我从 Sketch 导出时，我有以下图像：

dog-header-mobile-1x.png
dog-header-mobile-2x.png
dog-header-mobile-3x.png
dog-header-mobile-4x.png

dog-header-tablet-1x.png
dog-header-tablet-2x.png
dog-header-tablet-3x.png
dog-header-tablet-4x.png

dog-header-desktop-1x.png
dog-header-desktop-2x.png
dog-header-desktop-3x.png
dog-header-desktop-4x.png

我想在适当的地方加载 1x、2x、3x 和 4x 图像。但是让我感到困惑的是，我有 3 个不同的图像用于 3 个设备，所以我需要使用 srcset 和 sizes 来实现这一点吗？这似乎是一种非常冗长的方法，我很确定我做错了。

【问题讨论】：

标签： css sketch-3

【解决方案1】：

您可以使用<picture> 元素。

<picture>
    <source
        media="(max-width: 740px)"
        srcset="
            dog-header-mobile-1x.png,
            dog-header-mobile-2x.png 2x,
            dog-header-mobile-3x.png 3x,
            dog-header-mobile-4x.png 4x">
    <source
        media="(max-width: 1440px)"
        srcset="
            dog-header-tablet-1x.png,
            dog-header-tablet-2x.png 2x,
            dog-header-tablet-3x.png 3x,
            dog-header-tablet-4x.png 4x">
    <source
        srcset="
            dog-header-desktop-1x.png,
            dog-header-desktop-2x.png 2x,
            dog-header-desktop-3x.png 3x,
            dog-header-desktop-4x.png 4x">

    <img src="dog-header-desktop-1x.png" alt="Dog">
</picture>

IE 不支持它，但会回退到默认的 img 元素。

【讨论】：

【解决方案2】：

您尝试过媒体查询吗？当您想使用手机、平板电脑或桌面版本时，您可以定义尺寸。在那里，您还可以为您的标题图像设置不同的背景图像。

https://wiki.selfhtml.org/wiki/CSS/Media_Queries

https://www.w3schools.com/css/css_rwd_mediaqueries.asp

【讨论】：

CSS 可以根据像素密度/设备加载图像吗？
啊，我发现min-resolution 有媒体查询。谢天谢地autoprefixer 负责供应商前缀。非常感谢。虽然这不是解决方案，但它对帮助我找到解决方案很有帮助。
@BugHunterUK 您可以使用“device-pixel-ration”为不同的像素比率设置媒体查询，所以我想是的，应该是可能的。也许下面的链接可以帮助你css-tricks.com/snippets/css/retina-display-media-query