如何为不同宽度的屏幕设置不同的图像源？

Question

我有一个问题：如果屏幕宽度小于1024px，我需要显示JPG图片，如果屏幕尺寸较大，我需要显示GIF视频。

技巧＃1：应该只下载其中一个。 技巧＃2：不能是css背景属性，cos image sorce是服务器上目录的随机内容。 技巧＃3：服务器语言是php。

Answer 1

如果你可以使用JQuery来确定要加载哪个图像，你可以试试这个。

在PHP中设置图像如下：

<img data-jpg="img-url-1.jpg" data-gif="img-url-2.gif" />

每个图像的路径在标记中定义为数据属性

然后允许您的JQuery在DOM加载后运行并确定屏幕大小。根据该值，将src的{​​{1}}属性设置为相应的网址。

<img />

工作示例：JSFiddle

Answer 2

picture元素可以让你做到这一点（WHATWG spec）。

<picture>
    <source srcset="examples/images/large.gif" media="(min-width: 1024px)">
    <source srcset="examples/images/default-small.jpg">
    <img src="examples/images/default-small.jpg">
</picture>

截至2014年7月，它仅在beta builds of browsers。但是你可以使用polyfill（即一些JavaScript在不支持的浏览器中模拟元素）：见Picturefill

请注意，img不仅是后备，而且始终需要：source元素只为img元素提供替代来源。有关详细信息，请参阅示例this guide。