当移动媒体查询使用其他图像时,是否会在移动设备上加载CSS背景图像?

第035章

说我body{background: url(image1.jpg)}默认情况下也有一个针对移动设备的媒体查询(当视口宽度小于600px时处于活动状态),该查询将某些image2.jpg图像设置为相同的body元素。

在移动设备上,image1.jpg仍然会被加载,然后由image2.jpg替换为媒体查询

空速

不,仅加载移动图像。演示这一点实际上非常简单。在运行之前,将代码段窗口调整为768px以下,等待背景加载,然后将其调整为全屏,您可以看到桌面背景已重新加载:

body{
  height: 100vh;
  background-image: url('https://static.pexels.com/photos/96918/pexels-photo-96918.jpeg');
  background-size: cover;
}


@media screen and (max-width: 748px){
  body{
    background-image: url('https://static.pexels.com/photos/27714/pexels-photo-27714.jpg');
  }
}
<div class="demo"></div>

由于用户@Johannes不同意,因此我将提供更可靠的证明。

这是在我扩展窗口之前: 在此处输入图片说明

之后:(背景现在是白色的,因为图像尚未完成加载) 在此处输入图片说明

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

背景图像没有为时事通讯的移动媒体查询显示正确的图像

使用媒体查询响应内联背景图像

如何使用 css 媒体查询仅在移动设备上定位谷歌浏览器

Chrome 移动设备上的背景图像和复杂渐变

背景图像在移动设备上多次显示

如何在媒体查询中使用 API 返回的图像作为背景图像?

如何为移动设备和不同的媒体查询放置两个图像

媒体查询图像以在台式机和移动设备上工作

在mousemove上移动背景图像

视差CSS背景图像稍微移动

媒体查询无法在移动设备上正常运行

如何设置媒体查询并使它们在移动设备上运行

通过媒体查询在移动设备上显示恒定的页脚

如何移动对象的背景图像而不移动其中的其他内容?

载入后淡入背景图像(无jquery),同时仍使用媒体查询来替换不同屏幕尺寸的图像

如何为移动设备替换标题背景图像 - bootstrap

移动设备上错误/不同的背景图像大小

背景图像在桌面上是 100% 的屏幕,但在移动设备上不是

索尼Xperia Z1移动设备上的背景图像被截断

背景图像不会显示在移动设备上 (iPhone 6s)

如何使用CSS媒体查询使网页移动友好

自动调整背景图像大小以适合较小的窗口和移动设备-HTML / CSS

仅使用CSS在移动设备上隐藏图像

使用媒体查询加载不同屏幕尺寸的图像

媒体查询,图像和加载时间

当我调整浏览器大小而不是在移动设备上时,媒体查询工作正常

多个CSS背景图片在移动设备上

CSS 媒体查询不适用于移动设备,但适用于桌面设备

在与背景图像不同的行上移动 h1