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

【问题标题】：Complex media queries, no javascript and no unnecessary downloading of images复杂的媒体查询，没有 javascript，也没有不必要的图像下载
【发布时间】：2026-02-11 06:25:01
【问题描述】：

我有这个布局：

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

所以我想出了这个：

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

在纵向布局中（适用于智能手机设备或任何适合该尺寸的屏幕），只有 1 张图片，它不是在横向视图或台式电脑上显示的图片。

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

我知道我可以只在横向视图中包含大量图片，但只能选择在移动版本上显示它，但我不想不必要地下载。

有没有办法解决这个问题？

【问题讨论】：

这里你必须通过用户代理或屏幕分辨率检测，单独的 HTM/CSS 无法提供该功能

标签： html css

【解决方案1】：

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

<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;
    }
}

不能直接在HTML中插入图片，否则会一直下载图片！即使您将其设置为显示：无。所以需要插入带有css的图片作为背景图片。

【讨论】：

【解决方案2】：

在纵向布局中（适用于智能手机设备或任何适合该尺寸的屏幕），只有 1 张图片，它不是在横向视图或台式电脑上显示的图片。

仅使用服务器端脚本是不可能的，因为设备宽度等信息不会发送到服务器。

但是，您可以尝试检测访问用户代理和其他标头信息的移动设备和其他设备。如果你使用 PHP，你可以使用类似的东西： https://github.com/serbanghita/Mobile-Detect/

【讨论】：

我的问题中没有提到PHP，不仅是因为我鄙视PHP，还因为我没有在这个项目中使用它。另外，谢谢你的回答。检查用户代理会有所帮助，但作用不大。效果并不总是很好。
不过，您需要 javascript 才能访问设备屏幕大小。你不能在服务器端访问它！
没有问题 :) 我可以确保某些 CSS 样式仅使用媒体查询在某些屏幕分辨率下呈现，而无需使用 javascript。当两种布局都如此彼此不同时，我只是不知道如何使它工作。