在<source />元素的'media'属性中组合逻辑OR和逻辑AND

Question

我正在尝试建立一个<picture>元素和几个子<source>元素，以便根据最小宽度和分辨率条件提供图像。我有4张图片：

• 2倍宽的图像（用于最小宽度的视网膜设备）
• 窄幅2倍图像（用于最小宽度以下的视网膜设备）
• 1x宽幅图像（用于最小宽度的非视网膜设备）
• 1x窄图像（用于最小宽度以下的非视网膜设备）

这是我将它们组合在一起的方式：

<picture>
    <source
        srcset="Image_Wide_2x.jpeg"
        media="
            (min-width: 768px) and (-webkit-min-device-pixel-ratio: 2),
            (min-width: 768px) and (min-resolution: 192dpi)" >
    <source
        srcset="Image_Narrow_2x.jpeg"
        media="
            (-webkit-min-device-pixel-ratio: 2),
            (min-resolution: 192dpi)" >
    <source
        srcset="Image_Wide_1x.jpeg"
        media="
            (min-width: 768px)" >
    <source
        srcset="Image_Narrow_1x.jpeg" >
    <img
        src=“someFallbackImage.jpeg” >
</picture>

这可以按预期工作，但是在第一个source元素上废除的min-width查询使我感到困惑。我尝试过：

    <source
        srcset="ImageA@2x.jpeg"
        media="
            (min-width: 768px) and (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi)" >

但是浏览器将其解释为...“如果min-width和webkit-min-device-pixel-ratio条件都为真，或者，只有min-resolution条件为真”

当我想要的是...“如果min-width条件为真，而webkit-min-device-pixel-ratio或min-resolution条件为真”

我阅读了媒体属性here的文档，但是（至少对我而言）（在我看来）不清楚将逻辑OR和逻辑AND运算符组合在一起时的操作顺序。

仅供参考-我从here和here得到了建议的视网膜查询。我是解析查询的新手，但我假设我同时需要webkit-min-device-pixel-ratio和min-resolution，这就是让我感到困惑的原因。

有使用图片和源元素实现我想要的更好的方法吗？