如何基于屏幕尺寸在HTML/CSS/JS中切换背景图（艺术指导需求）

我正在开发一个项目，桌面端元素以5:6宽高比的卡片形式展示，移动端则以1:10宽高比的风格化列表项展示。目前每个元素都要维护桌面和移动端两个版本，我想把两者合并，降低后续代码变更的成本，减少新增元素的维护工作量。

现有代码片段如下：

<div class="desktop-wrapper">
    <div class="card" style="background-image: url('[name]-l.webp')">
      <div class="card-flexbox">
        <h2 class="titel">Example 1</h2>
        <p class="hover-text">
          Lorem ipsum dolor sit amet, consectetur adipisici elit
        </p>
        <a href="#" class="card-btn">More info</a>
      </div>
      <!--装饰层-->
      <div class="img-overlay-2"></div>
      <div class="img-overlay-1"></div>
      <!--全局点击区域-->
      <a href="#">
        <span class="link-span"></span>
      </a>
    </div>
    (...)
</div>
<!--移动端版本-->
<div class="mobile-wrapper">
  <a href="#" class="mobile-card-link">
    <div class="mobile-karte" style="background-image: url('[name]-s.webp')">
      <h3 class="titel">Example 1</h3>
      <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="20px">
        <path class="chevron" d="(...)"></path></svg>
      <!--装饰层-->
      <div class="mobile-card-overlay"></div>
    </div>
  </a>
  (...)
</div>

出于艺术设计要求，两种版本的卡片要用不同图片：移动端用宽版[name]-s.webp，桌面端用高版[name]-l.webp。

我希望通过脚本结合这个命名规范解决问题，理想状态是只在HTML里写<div class="mobile-karte" style="background-image: url('./img/stamp')">...</div>，让脚本根据屏幕尺寸自动扩展背景图URL——比如在600px断点以下添加-s.webp，桌面端添加-l.webp。

请问这个方案可行吗？如果可行，该怎么实现？

我还考虑过其他方案：

• 给每个元素设置独立ID，通过媒体查询在特定断点切换背景图。这是个不错的备选，但我更倾向用脚本简化操作、减少人工劳动。
• 使用image-set()，但每次新增卡片都要手动写大量内容，而且它不支持按特定断点切换。
• 使用srcset，它支持特定断点，但需要把背景图改成img元素，操作太复杂。

这个方案完全可行，以下是具体实现步骤：

1. 统一HTML结构 #

把桌面和移动端的卡片合并为一套结构，用CSS媒体查询控制不同断点下的布局样式（宽高比、内容显隐等）。示例结构如下：

<div class="card-container">
  <div class="card" data-img-base="./img/stamp">
    <!-- 桌面端专属内容 -->
    <div class="desktop-content">
      <h2 class="titel">Example 1</h2>
      <p class="hover-text">Lorem ipsum dolor sit amet, consectetur adipisici elit</p>
      <a href="#" class="card-btn">More info</a>
    </div>
    <!-- 移动端专属内容 -->
    <div class="mobile-content">
      <h3 class="titel">Example 1</h3>
      <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="20px">
        <path class="chevron" d="(...)"></path>
      </svg>
    </div>
    <!-- 通用装饰层 -->
    <div class="img-overlay-2"></div>
    <div class="img-overlay-1"></div>
    <!-- 全局点击区域 -->
    <a href="#"><span class="link-span"></span></a>
  </div>
</div>

这里用data-img-base属性存储图片基础路径，替代原style里的背景图URL，方便脚本读取和修改。

2. 编写JavaScript脚本 #

脚本需要实现两个核心功能：页面加载时根据当前屏幕尺寸设置正确背景图，窗口大小改变时重新适配。

// 定义断点阈值
const BREAKPOINT = 600;

// 设置卡片背景图的核心函数
function setCardBackgrounds() {
  const cards = document.querySelectorAll('.card');
  cards.forEach(card => {
    const basePath = card.dataset.imgBase;
    if (!basePath) return;
    
    // 根据屏幕宽度选择图片后缀
    const suffix = window.innerWidth < BREAKPOINT ? '-s.webp' : '-l.webp';
    const fullUrl = `${basePath}${suffix}`;
    card.style.backgroundImage = `url('${fullUrl}')`;
  });
}

// 页面加载完成后初始化
document.addEventListener('DOMContentLoaded', setCardBackgrounds);

// 窗口 resize 时重新适配（添加防抖优化性能）
function debounce(func, delay = 200) {
  let timeoutId;
  return (...args) => {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => func.apply(this, args), delay);
  };
}
window.addEventListener('resize', debounce(setCardBackgrounds));

3. 用CSS媒体查询控制布局 #

通过媒体查询切换不同断点下的卡片样式与内容显隐：

.card-container {
  /* 通用容器样式 */
}

.card {
  /* 通用卡片样式 */
  background-size: cover;
  background-position: center;
}

/* 桌面端样式（>=600px） */
@media (min-width: 600px) {
  .card {
    aspect-ratio: 5/6;
  }
  .desktop-content {
    display: block;
  }
  .mobile-content {
    display: none;
  }
  /* 其他桌面端专属样式 */
}

/* 移动端样式（<600px） */
@media (max-width: 599px) {
  .card {
    aspect-ratio: 1/10;
  }
  .desktop-content {
    display: none;
  }
  .mobile-content {
    display: block;
  }
  /* 其他移动端专属样式 */
}

降级优化 #

如果担心JavaScript被禁用的情况，可以在HTML的style属性里默认设置桌面端背景图，作为兜底方案：

<div class="card" style="background-image: url('./img/stamp-l.webp')" data-img-base="./img/stamp">

内容的提问来源于stack exchange，提问作者Ben