移動設備 - 不同的背景 - 媒體查詢不工作

這是我在利用不同的CSS爲移動設備與普通屏幕的第一次嘗試。要做到這一點，我using-

@media only screen 
    and (min-device-width : 320px) 
    and (max-device-width : 480px) { 
     background: url('img/background.jpg') no-repeat center center fixed; 
     background-size: cover; 
     height: 100%; 
}

然而，它似乎並沒有工作（我可以在iPhone上唯一的測試）。任何想法，爲什麼這可能是？我也試過@media all無濟於事。

來源

2012-08-29 AMC

你確定它不起作用嗎？您是否嘗試過使用純色的「背景色」來查看圖片是否有問題？ –

您沒有在該代碼中定位HTML元素？ – cih

@RoddyoftheFrozenPeas是的，改成'background：red;'沒有效果。 – AMC

media only screen and (min-device-width : 320px) and (max-device-width : 480px) { 
     body{ 
      background: url('img/background.jpg') no-repeat center center fixed; 
      background-size: cover; 
      height: 100%; 
     } 
}

的身體是你的目標所以假設你在你的HTML一個<body>標籤的CSS樣式上面會時，該設備符合標準寬度施加的HTML元素。

編輯：也可以嘗試這樣的背景下，如果該文件是應工作...

background: transparent url(/img/background.jpg/) no-repeat center center fixed;

編輯：原來的!important標籤修復了這個問題，你可以閱讀更多關於CSS優先here。

來源

2012-08-29 21:37:01 cih

啊，是的。這就說得通了。但是，進行這些更改仍然不會改變移動背景？ – AMC

hmm ..文件路徑是否正確？固體背景顏色是否像Roddy所建議的那樣工作？試試www.yoururl.com/img/background.jpg – cih

文件路徑絕對正確。我試過使用純色，以及'html'而不是'body'，沒有改變。 – AMC

移動設備 - 不同的背景 - 媒體查詢不工作

回答

相關問題