现在要开发一个响应式的网站，怎么实现根据设备的尺寸和分辨率，加载不同尺寸的 banner？要求不使用 JavaScript

使用 <picture> 元素

<picture>
  <source media="(min-width: 1200px)" srcset="banner-large.jpg" />
  <source media="(min-width: 600px)" srcset="banner-medium.jpg" />
  <img src="banner-small.jpg" alt="Banner Image" />
</picture>

使用多个 <source> 元素，根据屏幕的最小宽度来选择不同的图片。

使用 srcset 属性

如果只想使用 <img> 标签，可以这样做：

<img
  src="banner-small.jpg"
  srcset="banner-medium.jpg 600w, banner-large.jpg 1200w"
  sizes="(min-width: 1200px) 100vw,
            (min-width: 600px) 50vw,
            100vw"
  alt="Banner Image"
/>

在 <img> 标签中使用 srcset 定义多个图片及其宽度，结合 sizes 属性指定如何选择图片。

是的，媒体查询和 image-set() 也可以用于实现响应式图片，下面是如何使用它们：

媒体查询

你可以使用 CSS 媒体查询来根据屏幕尺寸设置背景图像。例如：

.banner {
  background-image: url("banner-small.jpg");
}

@media (min-width: 600px) {
  .banner {
    background-image: url("banner-medium.jpg");
  }
}

@media (min-width: 1200px) {
  .banner {
    background-image: url("banner-large.jpg");
  }
}

通过不同的屏幕宽度定义样式，使得不同尺寸的背景图像在相应的设备上加载。

image-set()

如果你使用 CSS，可以利用 image-set() 来根据设备像素比加载不同的图片：

.banner {
  background-image: image-set(
    url("banner-small.jpg") 1x,
    url("banner-medium.jpg") 2x,
    url("banner-large.jpg") 3x
  );
}

根据设备的像素比自动选择合适的图像，提升图像清晰度和加载性能。