Question

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

以下是代码：

<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：我在按钮中有另外一个问题：我需要为每个设备添加不同的按钮图像，我该怎么做？

你能帮忙吗？

由于

Answer 1

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

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

1 个答案: