Question

我想将image_1用于桌面屏幕，将image_2用于移动设备作为背景图片，当然，我不想在使用移动版本时加载image_1（图片_2已加载）。这是否可以通过css和跨浏览器支持（包括旧浏览器）？

我推出了这个解决方案，但我不知道这是否是跨浏览器（使用IE10 /边缘和最新版本的FF，Opera，Chrome - 它工作正常）。

HTML

<div class="bg">
   <div>
      <div>
         Content
      </div>
   </div>
</div>

CSS

.bg {
      background: #FFFFFF url("image_1.png") no-repeat center top;
}

@media (max-width:306px) {
   .bg {
      background: #FFFFFF url("image_2.png") no-repeat center top; 
                           /* will the image_1.png image load this way
                           in old browsers if condition of max-width is true?*/
   }
}

Answer 1

这应该适用于除ie8及以下不支持媒体查询的所有浏览器

Answer 2

我已经为您测试了这个，除了早期版本的IE不支持媒体查询之外，所有浏览器都可以使用。

：）

跨浏览器支持不加载图像 - 响应式设计

2 个答案: