0

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

这是代码：

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

你能帮我吗？

谢谢

4

1 回答 1

0

确保您的 HTML<meta name="viewport" content="width=device-width,initial-scale=1.0"> 中有一个。这是一个工作演示<head>

于 2013-06-24T16:43:35.997 回答