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

【问题标题】：Set different image for small device and for large devices为小型设备和大型设备设置不同的图像
【发布时间】：2013-06-23 09:22:08
【问题描述】：

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

代码如下：

<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;} 
}

p.s：我在按钮中还有另一个相同的问题：我需要为每个设备放置不同的按钮图像，我该怎么做？

你能帮忙吗？

谢谢

【问题讨论】：

标签： html media-queries zurb-foundation

【解决方案1】：

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

【讨论】：