0

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

例如，我为基本媒体放置了一个尺寸为1400pxby的图像，为移动设备放置了另一个尺寸为by的图像。500px450px200px

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

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

你有什么看法？

4

1 回答 1

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的设备解释。

您可以使用不同的方法来防止下载这两个图像。

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

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

于 2012-10-06T10:15:51.123 回答