在移动设备和桌面设备上加载不同的元素或背景图片

Question

我正在一个网站上工作（使用 Antlers、Bootstrap、SCSS 的 Statamic v3），它涉及针对移动和桌面背景（内联样式）的不同上传。做这个的最好方式是什么？我在这些问题上苦苦挣扎了一段时间。当然我可以使用 display none 和 display block 媒体查询，但我希望有一个解决方案，只有移动图像加载到移动/小屏幕尺寸，只有桌面图像加载到桌面/大屏幕尺寸所以它对页面加载更好。

对于 img 标签，可以使用 img srcset，但不能使用背景图片。我也在问自己如何使用大量代码（因此不一定使用背景图像）来使用部分/元素来做到这一点

我也尝试使用 JavaScript 的移动检测，但问题是如果用户在桌面上工作但浏览器视图较小，它不会得到 'mobile version' 的网站。

我最终大多使用 Bootstraps d-none 和 d-block 进行媒体查询，但感觉不对。

有人对此有保持良好页面加载的最佳做法吗？

编辑：我添加了一些代码来展示我想要实现的目标。用户可以在 CMS 上传桌面背景图像和移动背景图像。据我所知，这两个图像都将加载到页面中，但由于显示属性，它们不会同时显示。我的目标是页面不会加载两个图像，而只会加载该视口大小所需的图像。我无法在我的 SCSS 中使用媒体查询执行此操作，因为我无法在我的 SCSS 中设置背景 url。

<div class="row d-md-none main-content" style="background-image: url('{{ bg_image_desktop }}')">
  <div class="offset-md-2 col-md-8">
    <h1></h1>
  </div>
</div>

<div class="row d-none d-md-block main-content" style="background-image: url('{{ bg_image_mobile }}')">
  <div class="col-12">
    <h1></h1>
  </div>
</div>

Answer 1

最好的选择是对包含背景图像的元素使用媒体查询，即

<div class="bgImage"></div>

然后在 CSS 中，您基本上会对每个断点使用媒体查询。我将采用移动优先设计。

.bgImage {
   background: url(path_to_image);
}

@media screen and (min-width: 769px) {
  .bgImage {
    background: url(path_to_tablet_image);
  }
}

@media screen and (min-width: 1200px) {
  .bgImage {
    background: url(path_to_desktop_image);
  }
}

有一个站点 screensiz.es 包含一堆针对移动设备的不同断点。

此外，在再次阅读您的 post 后，我还会考虑使用具有不同 srcset 的 picture 元素作为图像。

Answer 2

您可以使用带有一点 JavaScript 的媒体查询来实现您想要的。这个想法是使用 data-* 属性将图像的 URL 传递到页面，然后使用 JS 将 URL 复制到 CSS variables，最后媒体查询根据屏幕宽度显示想要的图像.像这样：

(function () {
  const div = document.querySelector('.bg-image'),
    src = div.getAttribute('data-bg').split(','), // Exctracts URLs from data-bg to an array
    html = document.documentElement; // A reference to <html> element
  html.style.setProperty('--bg-desktop', `url(${src[0]})`);
  html.style.setProperty('--bg-mobile', `url(${src[1]})`);  
}());

/* :root is <html> element */
:root {
  --bg-desktop: none;
  --bg-mobile: none;
}

.bg-image {
  min-height: 200px;
}

@media screen and (max-width: 768px) {
  .bg-image {
    background-image: var(--bg-mobile);
  }
}

@media screen and (min-width: 769px) {
  .bg-image {
    background-image: var(--bg-desktop);
  }
}

<div class="bg-image"
  data-bg="https://cdn.pixabay.com/photo/2016/09/04/20/14/sunset-1645103_960_720.jpg,https://cdn.pixabay.com/photo/2018/05/18/16/41/globe-3411506_960_720.jpg"
>
</div>

出于演示目的，我在 data-bg 属性中对 URL 进行了硬编码，但在实践中，您将使用占位符编写值，然后由您的服务器将其替换为正确的 URL：

data-bg="{{ bg_image_desktop }},{{ bg_image_mobile }}"

因为未应用的 CCS 规则中的图像不会被加载，这样您可以确保桌面图像不会被加载到屏幕小于 769px 的设备上（或者您放入 min-width 的任何内容）。在台式计算机上，首先加载其中一个图像，然后在调整 window 大小时，如果超过限制，也会加载另一个图像。

您也可以使用 jsFiddle 中的代码。

在移动设备和桌面设备上加载不同的元素或背景图片

Load different element or background image on mobile vs desktop

javascript

sass

twitter-bootstrap

statamic

responsive