Question

例如，假设我有一个div并将背景图像设置为＆＃39; X＆＃39;仅针对桌面大小显示。当查询更改为移动设备时，我会将背景图片设置为＆＃39; Y＆＃39;。

这样做是为了让它只能在移动设备上使用＆＃39; Y＆＃39;被加载而不是＆＃39; X＆＃39;？＆＃39; X＆＃39;是一个大图像＆＃39; Y＆＃39;很小，我正在努力改善加载时间。此外，如果在桌面上，X＆＃39; X＆＃39;和＆＃39; Y＆＃39;加载或只是＆＃39; X＆＃39;而不是＆＃39; Y＆＃39;？

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，它可以帮助您

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

3 个答案: