Css 在移动设备上加载更大尺寸的横幅图像

我正在使用：测试我的网站的所有设备。我感兴趣的是为索引正确设置标题上的图像。 目前，图像在所有设备中都显示得很好。此外，蓝色和橙色按钮彼此太近，并且 图像看起来太大（您必须滚动才能看到）

当前结果：

我已设置媒体查询来处理此问题。很明显，他们工作得不好

（在此处输入以在线检查不同设备上的站点）

预期结果：

（在此处输入以在线检查不同设备上的站点）

代码笔：

---

在html中，您可以为不同大小的设备指定不同的图像：

<picture>
   <source media="(max-width: 480px)" srcset="yoursourceMobile.jpg">
   <source media="(max-width: 2056px)" srcset="yoursource.jpg">
   <img src="yoursource.jpg">
</picture>

写下以下内容：

@media (max-width: 480px) {

代替：

@media (min-width: 320px) and (max-width: 480px) {

@media (min-width: 320px) and (max-width: 480px) {