響應CSS不工作

這裏是我的CSS，作爲一個測試：響應CSS不工作

*{margin:0;padding:0;outline:0;border:0;} 

body{background:#686465;font-family:Arial,Verdana,sans-serif;font-size:100%;} 
@media screen and (max-device-width:320px){ 
    body{background:red !important;} 
} 

@media screen and (max-device-width:800px){ 
    body{background:organge !important;} 
}

我有2級使用SDK測試這個運行Android的設備。一個是3.2英寸的HVGA Slider 320x480，並且第一個規則在該設備上拾取並將身體背景設置爲紅色。第二個設備是Nexus 7 800x1280，但是這個設備忽略了兩個媒體規則;但是，如果我刪除第一個媒體規則，然後它拿起它。爲什麼？？

來源

2013-03-29 Glen

大概是「橙色」拼寫正確的你的直播規則？作爲無效值，佈局引擎將忽略此值。 Rohit糾正了拼寫。除了多個媒體查詢規則匹配並且具有相同選擇器的重複屬性之外，我不相信該順序具有任何意義，在這種情況下，將應用最後一個媒體查詢的值。 – pwdst

可能還值得一提的是，您所選擇的瀏覽器的開發人員工具對於解決這些「爲什麼不能正常工作」的問題以及無需重複保存您的CSS的「玩耍」問題是非常寶貴的並刷新該網站。如果您使用Google Chrome作爲主要瀏覽器，那麼在http://www.codeschool.com/courses/discover-devtools上有關於使用開發工具的優秀免費課程。無論您使用哪種瀏覽器，學習開發人員工具的時間都將耗費大量時間。 – pwdst

更換成這個

*{margin:0;padding:0;outline:0;border:0;} 

body{background:#686465;font-family:Arial,Verdana,sans-serif;font-size:100%;} 
@media screen and (max-device-width:320px){ 
    body{background:red !important;} 
} 

@media screen and (max-device-width:800px){ 
    body{background:organge !important;} 
}

這

*{margin:0;padding:0;outline:0;border:0;} 

body{background:#fcfcfc;font-family:Arial,Verdana,sans-serif;font-size:100%;} 


@media screen and (max-device-width:800px){ 
    body{background:orange;} 
} 

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

更多media query-1

Media query-2

來源

2013-03-29 09:28:28

那麼工作。所有你做的不同是先放大一點？ – Glen

你有沒有把這個鏈接在HTML文件中： -

<meta name="viewport" content="width=device-width, initial-scale=1.0;">

你可以使用 -

@media only screen and (max-width:800px){ }

代替OF-

@media screen and (max-device-width:800px){ }

來源

2014-01-25 13:30:25

響應CSS不工作

回答

相關問題