爲小設備和大設備設置不同的圖像

我需要爲小設備和大設備設置不同的圖像。我試圖用媒體查詢解決它，但沒有任何成功。爲小設備和大設備設置不同的圖像

下面是代碼：

<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

謝謝你的例子 –

爲小設備和大設備設置不同的圖像

回答

相關問題