Html 复杂的媒体查询，没有javascript，也没有不必要的图像下载

我有这样的布局：

对于桌面/景观网站。我希望它能在移动设备上很好地扩展，但同时我不希望网站看起来像垃圾，所以我想稍微改变一下内容，使其更适合移动设备/智能手机大小的屏幕

所以我想到了这个：

在风景图中，中间的5个盒子是div，每个div都包含一个图片和一个标题（链接到另一个页面）。这5个框是主要的导航

在纵向布局中（对于智能手机设备或任何适合该尺寸的屏幕），只有一张图片，而不是显示在横向视图或桌面pc上的图片

我们不能在这个网站上使用JavaScript，所以我想知道如何使用媒体查询对这个布局进行如此巨大的更改

我知道我甚至可以将massiv图片包括在横向视图中，但只选择在移动版本中显示它，但我不想不必要地下载

有办法解决这个问题吗

在纵向布局中（对于智能手机设备或任何适合该尺寸的屏幕），只有一张图片，而不是显示在横向视图或桌面pc上的图片

单独使用服务器端脚本是不可能的，因为像设备宽度这样的信息不会发送到服务器

但是，您可以尝试检测访问用户代理和其他标头信息的移动设备和其他设备。 如果您使用PHP，您可以使用以下内容：

---

好的，这应该给你一个想法：

<div id="massive-pic"></div>

@media all and (min-width: 601px) {
    #massive-pic {
        display:none;
    }
}
@media all and (max-width: 600px) {
    #massive-pic {
        background-image:url('images/massive-pic-mobile.png');
        width:100%;
        height:600px;
    }
}

@介质和全部（最小宽度：601px）{
#海量图片{
显示：无；
}
}
@全部和全部介质（最大宽度：600px）{
#海量图片{
背景图片：url（'images/massive pic mobile.png'）；
宽度：100%；
高度：600px；
}
}

您不能直接在HTML中插入图像，否则图像将一直下载！即使将其设置为显示：无。

---

因此，您需要插入带有css的图像作为背景图像。

我在问题中没有提到PHP，这不仅是因为我鄙视PHP，也是因为我没有在这个项目中使用它。另外，谢谢你的回答。检查用户代理可以有所帮助，但只有一点帮助。它并不总是运行良好。不过，您需要javascript来访问设备屏幕大小。您无法在服务器端访问它！没有问题：）我可以确保在不使用javascript的情况下，仅使用媒体查询在特定屏幕分辨率下呈现特定CSS样式。我只是不知道当这两种布局彼此如此不同时如何使其工作。您必须在这里通过用户代理或屏幕分辨率检测，HTM/CSS本身无法提供该功能