为小设备和大设备设置不同的图像

我需要为小设备和大设备设置不同的图像。我试图用媒体查询解决它，但没有任何成功。为小设备和大设备设置不同的图像

下面是代码：

<div class="small-12 large-4 columns" id="stickSlider"> <br> 
     <a href="#" id="leftSliderImage"></a> 
    </div>

在css文件：

#leftSliderImage { background-image: url('img/leftSlider.gif'); width: 324px; height:395} 

@media screen and (max-width: 767px) 
{ 
    #leftSliderImage { background-image: url('img/smartLeftSlider.png'); width: 543px; height:224px;} 
}

PS：我在按钮另一个同样的问题：我需要把不同的按钮图像到每个设备，怎么能我这样做？

你能帮忙吗？

感谢

来源

2013-06-23 Avital Macabi

确保你在你的HTML的<head>一个<meta name="viewport" content="width=device-width,initial-scale=1.0"> 。 Here's a working demo

来源

2013-06-24 16:43:35

谢谢你的例子 –

为小设备和大设备设置不同的图像

回答

相关问题