复杂的媒体查询，没有JavaScript和没有不必要的图像下载

Question

我有这个布局：

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

所以我想出了这个：

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

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

我们无法在此网站上使用JavaScript，因此我想知道如何使用媒体查询对此布局进行如此显着的更改。

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

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

Answer 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中插入图像，否则图像将全部下载！即使您将其设置为display：none。 所以你需要插入带有css的图像作为背景图像。

Answer 2

  

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

单独使用服务器端脚本无法实现这一点，因为设备宽度等信息无法发送到服务器。

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