我试图使用srcset属性在浏览器达到特定屏幕大小时交换图像。当屏幕尺寸超过768像素宽时，我需要显示桌面图像。
我已经能够在大多数浏览器中使用下面的代码完成此操作，不包括firefox。我对'srcset'游戏很新，所以我不确定我的语法错误是否存在。记住视网膜设备，有没有人知道我在这里缺少什么？浏览器对srcset的支持似乎已经足够，所以我不确定是什么导致这种情况。
<img class="desktop-hero" alt="" src="../img/hero_desktop.jpg" srcset="../img/hero_mobile.jpg 768w, ../img/hero_desktop.jpg 1x" />
编辑补充：哟，你从哪个教程得到了这个标记？我刚刚意识到这似乎是尝试使用旧的srcset语法，没有人实现过，这是一个坏主意。如果你可以指出你得到它的位置，我们可以尝试更新该教程，并防止更多人犯同样的错误。
首先，混合w和x无效。这不应该是你的问题的直接原因，但它会导致完全不可预测的行为。 （w描述符根据其值和sizes属性的值转换为等效的x描述符。）
其次，w描述符不会像你要求的那样做任何事情。它与sizes属性一起用作间接指定图像密度的方法，当图像在页面上的最终大小不是单个硬编码的px值时。它与屏幕的大小无关，也不隐藏任何内容。它是图像的宽度，以图像像素为单位。
现在，假设hero_desktop和hero_mobile实际上是不同的图像（不同的大小，不同的作物，不同的内容等），而不仅仅是同一图像的不同分辨率版本，你真正想要做的是使用<picture>：
HTML：
<picture>
<source media="(min-width: 768px)" srcset="../img/hero_desktop.jpg">
<img src="../img/hero_mobile.jpg">
</picture>
这将在屏幕> = 768px时选择桌面图像，否则默认为移动图像。
另一方面，如果桌面和移动图像是相同的图像，只是在不同的分辨率，那么你确实想使用<img srcset>，但坚持使用x或w两者。如果图像是静态大小，则使用x，或者允许它是“原生”大小。如果图像按布局设置为特定大小，请使用w（和sizes）。然后不要担心图像何时切换;如果您已正确宣布，浏览器将为您做出合理的选择。