CSS3媒體查詢不起作用？

所以我試圖以我的目標爲響應式設計，並且看到了這個應該以所有iPhone爲目標的「簡單」媒體查詢。試過了，在Firefox和Chrome中測試過，結果都沒有成功。我在Firefox中使用了新的「響應式設計」工具，並沒有工作，所以然後我試圖調整大小的窗口也沒有工作。我也嘗試在Chrome中調整瀏覽器窗口大小，並且這也被證明是不成功的！任何幫助表示讚賞！首先是我的HTML：CSS3媒體查詢不起作用？

<!DOCTYPE html> 
<html> 
    <head> 
     <meta name="viewport" content="width=device-width" /> 
     <title>CSS Media Queries</title> 
     <link rel="stylesheet" type="text/css" href="test.css" media="screen"> 
    </head> 
    <body> 

    <p>Hello there, if this is blue, the responsive css is not working, however if it is red, then it is working!</p> 
    </body> 

</html>

現在我的CSS：

@media only screen and (max-width : 320px) { 
body{ 
    color:red; 
    } 
} 

body{ 
    color:blue; 
}

來源

2013-06-24 Eric Diviney

與非媒體查詢'媒體查詢一個前body'規則再次嘗試。 –

它不是由於工作的cascade的性質，因爲你@media規則先於你的正常的身體規律，從而導致無法由於它們具有相同的特異性而被重寫（一種類型選擇器 - body）。您只需切換周圍的訂單，例如

body { 
    color:blue; 
}  

@media only screen and (max-width: 320px) { 
    body { 
    color:red; 
    } 
}

http://jsfiddle.net/Adrift/sCWWD/2/

來源

2013-06-24 21:23:56 Adrift

我認爲最好用最大寬度來演示它，然後當你調整窗口大小時它會改變 – raam86

@ raam86：更新了我的小提琴，我實際上發佈了錯誤的一個：p – Adrift

想到了！保持檢查編輯，看看你是否更新了小提琴 – raam86

CSS3媒體查詢不起作用？

回答

相關問題