媒体查询如何响应

我想知道媒体查询如何响应。媒体查询如何响应

例如，我具有由500px放置大小1400px的图像基本媒体，并通过为200px移动设备尺寸450px的另一图像。

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

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

您的观点是什么？

来源

2012-10-06 Ankur Vishnoi

不，不会在移动设备上显示大图，只要您将其插入到排除该媒体查询的媒体查询中即可。但是，这将是下载，如果你组织你的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的设备进行解释。

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

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

这里有一些资源，你会发现usefuls：

来源

2012-10-06 10:15:51 Giona

媒体查询如何响应

回答

相关问题