时间戳

首页 > 解决方案 > 响应式背景图像（为性能提供最佳尺寸）

html - 响应式背景图像（为性能提供最佳尺寸）

问题描述

在以下 CSS 代码中，是否会同时获取两个图像？

.class {
    background-image: url(https://img.com/small);

    @screen (min-width: 700px) {
       background-image: url(https://img.com/big);
    }
}

我们不想为移动设备提供大图像。我们有srcset/sizes，但这不适用于背景图像。我们有image-set()，但这似乎关心像素密度，而不是屏幕宽度（我认为）。你如何处理这个问题？

标签： htmlcssimageresponsive-design

解决方案

不知道为什么我没有按照@TJ 的建议检查网络选项卡。事实证明（至少在 Chrome 中）它们并没有全部被获取，并且当您调整屏幕大小时，会获取新图像。

我想我会使用这个 postcss mixin，但如果有人有其他方法，我仍然会感兴趣。

@define-mixin responsive-bg-img $src {
  background-image: url('$(src)?nf_resize=fit&w=smallpx');

  @screen sm {
    background-image: url('$(src)?nf_resize=fit&w=mediumpx');
  }

  @screen md {
    background-image: url('$(src)?nf_resize=fit&w=largepx');
  }
}

.responsive-bg-img-wine {
  @mixin responsive-bg-img ../assets/lfs/wine.png;
}

推荐阅读