1

当浏览器达到特定的屏幕尺寸时，我正在尝试使用 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" />
4

1 回答 1

3

编辑添加：哟，您从哪个教程中获得该标记？我刚刚意识到这看起来像是在尝试使用旧的 srcset 语法，没有人实现过，而且这是一个坏主意。如果你能指出你得到它的地方，我们可以尝试更新该教程，并防止更多人犯同样的错误。

首先，混合 w 和 x 是无效的。这不应该是你的问题的直接原因，但它会导致完全不可预测的行为。（w 描述符根据其值和sizes属性值转换为等效的 x 描述符。）

其次， w 描述符不会像您要求的那样做任何事情。当图像在页面上的最终大小不是单个硬编码的 px 值时，它与属性一起用作间接sizes指定图像密度的一种方式。它与屏幕大小无关，也没有隐藏任何东西。它是图像的宽度，以图像像素为单位。

现在，假设 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(and )。sizes然后不用担心图像何时切换；如果您正确地声明了事物，浏览器将为您做出合理的选择。

于 2015-10-07T21:04:23.297 回答