@media不起作用

我重寫我的網頁樣式使用媒體查詢較小的屏幕：@media不起作用

@media only screen 
and (min-width : 400px) 
and (max-width : 1024px) { 
#container { 
right:10px; 
top:50px; 
font-size:24px; 
position:absolute; 
min-height: 85%; 
margin-left:auto; 
width:100px; 
} 
#portfolio { 
width:100px; 
min-height:550px; 
-webkit-box-shadow: 0px 2px 10px 4px rgba(9, 9, 9, 0.2); 
box-shadow: 0px 2px 10px 4px rgba(9, 9, 9, 0.2); 
-webkit-border-radius: 10px; 
border-radius: 10px;} 
#whoami { 
width:100px; 
min-height:550px; 
-webkit-box-shadow: 0px 2px 10px 4px rgba(9, 9, 9, 0.2); 
box-shadow: 0px 2px 10px 4px rgba(9, 9, 9, 0.2); 
-webkit-border-radius: 10px; 
border-radius: 10px; } 
#blog { 
width:100px; 
min-height:550px; 
-webkit-box-shadow: 0px 2px 10px 4px rgba(9, 9, 9, 0.2); 
box-shadow: 0px 2px 10px 4px rgba(9, 9, 9, 0.2); 
-webkit-border-radius: 10px; 
border-radius: 10px;  
} 
#contact { 
width:100px; 
min-height:550px; 
-webkit-box-shadow: 0px 2px 10px 4px rgba(9, 9, 9, 0.2); 
box-shadow: 0px 2px 10px 4px rgba(9, 9, 9, 0.2); 
-webkit-border-radius: 10px; 
border-radius: 10px; 
} 

}

並沒有什麼DID在所有的工作。我通過我的Dreamweaver CS6兼容性視圖瀏覽網頁和它沒有工作，所以我通過調整我的瀏覽器窗口來檢查它，並沒有工作。任何想法爲什麼它不工作？它不適用於ID嗎？！

來源

2012-12-28 Marwan Ossama

你在小屏幕上試過了嗎？ – ppeterka

您需要顯示更多代碼或指向問題頁面的鏈接。 – BoltClock

我編輯了問題並輸入了整個@media代碼。 –

嘗試添加在你的頭在這個元：

<meta name="viewport" content="width=device-width" />

來源

2012-12-28 15:10:14 migkapa

不工作！ –

代碼發佈作品本身，所以這個問題是在其他地方，例如在構造內部的規則中或使用不支持媒體查詢的瀏覽器（這實際上意味着IE 8或更舊 - 否則browser support是非常好的）。

要退房的情況，測試先用最小的文件像

<!doctype html> 
<title>Testing media queries</title> 
<style> 
@media only screen 
and (min-width : 768px) 
and (max-width : 1024px) { 
    body { background: green; } 
} 
</style> 
Hello world

你也應該採取出來，使之成爲無條件，測試構造內的樣式表，看看它是否工作在所有。

來源

2012-12-28 15:47:50

我編輯了問題並輸入了整個@media代碼。我試過你的例子，它的工作原理！順便說一句我正在使用鉻，我不認爲這個星球上還有人仍在使用IE8：D –

如果你認爲沒有人使用IE8，那麼你已經半途而廢了。這裏是你的代碼工作（請調整你的瀏覽器，看看沒有樣式的VS風格的代碼）：http://jsfiddle.net/ryanwheale/3PPdh/ –

Offcourse我知道我只是在開玩笑，IE仍然被廣泛的無知的互聯網用戶誰認爲互聯網只能通過互聯網訪問..例如中國 –

這也發生在我身上，在Chrome和Firefox上。

我發現，當默認visibility設置爲hidden或display到none（受CSS的元素的可見性是由JS控制）的問題出現了。

來源

2016-04-18 21:25:15 Anarcociclista

@media不起作用

回答

相關問題