2013-10-16 44 views
0

編輯:解決了它。我不小心留下了一個媒體查詢,在我打算刪除的CSS中間。也修正了一些錯誤。謝謝你。作品。在媒體查詢中的css沒有得到應用

所以我有一堆html和css代碼,工作正常。然後我在css中添加2個媒體查詢,在每個查詢中我添加一些代碼來覆蓋其他一些css。儘管這個媒體查詢代碼沒有工作。這裏是我的媒體查詢的東西:

@media screen and (max-width: 975px){ 
    body .top_outermost_container { 
     width: 976px; 
    } 
} 
@media screen and (max-height: 485px){ 
    .bottom_bar { 
     top: 445px; 
     bottom: auto; 
    } 
} 
*/ 

林把整個代碼在這裏:http://codepen.io/anon/pen/CJgqI感謝羚牛一起來看看!你搖滾。真的。順便說一下,您可能需要將代碼複製並粘貼到文本編輯器中才能使瀏覽器呈現出高質量的效果。再次感謝

+2

你真的是指'max-height'嗎? –

+1

使用螢火蟲是這類事情的好主意,因爲它可以讓你看到從哪裏應用什麼樣式。這可能與您的風格定位的具體方式有關是否覆蓋工作有關。 –

+1

在您的標記中出現了相當多的錯誤,因爲''div沒有關閉,一些缺失'''等等。 – Xareyo

回答

0

尾隨*/看起來可能是一個問題。

你的語法看起來很好,它應該工作。

1

它看起來像是你說的問題是你永遠不會關閉你的第一個@media查詢。 @media screen and (max-width: 975px) and (max-height: 438px){需要「}」。第二個查詢不會觸發,因爲它不可能是另一個的子項。因此,在228行左右,您需要在@media screen and (max-width: 975px){查詢之前關閉「}」。但也有其他問題。

你的錯誤似乎是未來fromt他HTML,你就需要關閉標籤「>」

Line 15: <div class= "top_contained_container" </div> 
Line 39: <div class="bottom_list_container1" </div> 
Line 49: <div class="bottom_list2" </div> 

使用驗證工具,如http://html5.validator.nu/

你也有幾個錯誤你的CSS像額外的結束標記「}」

Line 114: body {overflow: hidden;}} 

在這裏你可以找到這些都是比較容易通過驗證工具,以及:http://jigsaw.w3.org/css-validator/validator