1

我正在开发一个网站（使用使用 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>
4

2 回答 2

0

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

(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使用代码。

于 2021-01-22T07:56:55.730 回答
0

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

<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);
  }
}

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

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

于 2021-01-21T13:39:03.727 回答