Question

我想知道媒体查询是如何反应的。

例如，我为基本媒体放置了1400px尺寸的图片，为移动设备放置了500px尺寸为450px的另一张图片。

我使用媒体查询在同一个html页面中调用它。当用户在移动设备中打开它时，我想显示小图像。

如果我为相同的图像调用两个CSS（即根据媒体使用css更改背景），我的大图像是否会加载到移动设备中？或者只是加载小图像忽略较大的图像？我把主CSS放在移动CSS之前。我认为必须加载大图像。如果是这样，那么我的网站将在移动设备中缓慢运行。

您的看法是什么？

Answer 1

不，只要您将其插入排除它的媒体查询中，大图片就不会显示在移动设备上。但如果您以这种方式组织CSS，它将下载：

/* FIRST DECLARATION:
    BROWSER STARTS DOWNLOADING THE IMAGE */
.my-img-class{
    background:url(my-large-image.jpg);
}

/* SECOND DECLARATION:
    THE RULE ABOVE IS OVERWRITTEN, SO THIS IMAGE WILL BE DOWNLOADED TOO */
@media only screen and (max-width: 600px) {
    .my-img-class{
        background:url(my-small-image.jpg);
    }
}

为防止移动设备继续下载大图像，您应将两个规则都包含在媒体查询中。

这是一个例子。

@media only screen and (max-width: 600px) {
    .my-img-class{
        background:url(my-small-image.jpg);
    }
}

以上代码仅由屏幕小于600px 的设备解释。

@media screen and (min-width: 601px) {
    .my-img-class{
        background:url(my-large-image.jpg);
    }
}

以上代码仅由屏幕大于600px 的设备解释。

您可以使用不同的方法来阻止同时下载这两种图像。

很大程度上取决于您网站的目标。如果移动版本使用最广泛，您应该开始计划，然后通过媒体查询逐步添加桌面版本的内容。

以下是一些您会发现有用的资源：

媒体查询是如何反应的

1 个答案: