是否可以根据媒体查询加载不同的图像以缩短加载时间？

Question

例如，假设我有一个 div 并将背景图像设置为 'X'，仅针对桌面尺寸显示。当查询更改为移动设备时，我会将背景图片设置为 'Y'.

这样做是否会导致在移动设备上仅加载 'Y' 而不是 'X'？ 'X' 是一张大图，而 'Y' 是小图，我正在努力缩短加载时间。另外，如果在桌面上会加载 'X' 和 'Y' 或只是 'X' 而不是 'Y'?

Answer 1

您可以根据媒体查询设置不同的背景图片来实现。

很遗憾，您无法设置图像标签的来源（仅适用于 javascript）。

示例：

.container {
  background-image: url(big.jpg);
}

@media all and (max-width: 699px) {
  .container {
    background-image: url(small.jpg); 
  }
}

Answer 2

您可以使用 CSS 媒体类型和屏幕尺寸来显示不同的背景。 http://css-tricks.com/snippets/css/media-queries-for-standard-devices/

Answer 3

是的，这就是媒体查询的作用

您可以为每个屏幕尺寸创建两个 css 例如：

@import url("test.css") screen and (min-width: 960px);
@import url("testmobile.css") screen and (max-width:  959px);

或者您可以在每个 css 规则上添加媒体查询。

@media all and (max-width: 699px) and (min-width: 520px) {
}

请检查这个link，它对你有帮助

Is it possible to load a different image based on a media query to improve load times?