说我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] 删除。
我来说两句