響應式佈局 - 使隱藏的div出現？

我對響應式佈局很陌生。我似乎擁有一切對我有利的工作，除了一件事：我無法使用'display: none;'屬性製作div，在我的媒體查詢中將其設置爲'display: block;'時出現。響應式佈局 - 使隱藏的div出現？

#test { 
display: none; 
} 
@media screen and (max-width:320px) { 
    #test { 

     display: block; 
    } 
}

我需要jQuery嗎？

？它應該像這樣工作，順便說一句... – hjuster

只是你知道，你不需要任何東西的jQuery。這是一個令人驚歎的框架，使開發人員的工作變得如此簡單，但它並沒有做任何簡單的JavaScript不能做的事 – BBog

你是不是正確選擇#TEST：

div#test { display: none; } 

@media screen and (max-width:320px) { 
    div#test { display: block; } 
}

2012-09-12 17:00:15 Lowkase

這不是它不工作的原因......它也可以這樣工作：http：/ /jsfiddle.net/jvqra/2/ – hjuster

對不起，仍然沒有工作... – user1666487

如你所料，因爲第一條規則的1 0 1一個特異性您的代碼不能運行，而第二個具有1 0 0的特異性。

如果你只是寫#test，而不是div#test，它會起作用，因爲當兩個規則具有相同的特徵時，最後一個被應用。

你可以閱讀更多關於CSS具體位置：

2012-09-12 17:00:57 Simone

用途：

#test { 
    display: none; 
}

是無用的寫div#test，因爲#test永遠是獨一無二的。 div#test只會拖慢你的表現（以類似0.000000000001s ;-)）

2012-09-12 17:07:24 Puyol

對不起，仍然沒有工作... – user1666487

這與我一起工作小於300像素： http://snag.gy/LCgEQ。其他尺寸： http://snag.gy/Y2lsn.jpg – Puyol

你的代碼是正確的，你肯定不需要任何的jQuery。當屏幕尺寸小於320px時，如果您想要使用相反的最小寬度，則會顯示測試div。這裏是你有一個例子某處網絡的example

2012-09-12 17:17:14 hjuster

你的CSS必須指定「重要」的DIV出現

@media screen and (max-width:320px) { 
    #test { block !important;} 
}

2016-07-04 19:41:54

回答