Question

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

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

我还尝试将移动检测与 JavaScript 结合使用，但问题是如果用户在桌面上工作但浏览器视图较小，则无法获取网站的“移动版本”。

>

我最终会在媒体查询中使用 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 包含一系列针对移动设备的不同断点。

此外，在再次阅读您的帖子时，我还会考虑使用具有不同 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 规则中的图像，因此您可以确保桌面图像不会加载到屏幕小于 769 像素（或您放置到 min-width 的任何设备）上。在台式机上，首先加载其中一个图像，然后在调整窗口大小时，如果超过限制，也会加载另一个图像。

您也可以在 jsFiddle 玩代码。

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

2 个答案: