2014-12-01 77 views
0

不知道爲什麼這不起作用。有任何想法嗎?媒體查詢看起來不起作用

當屏幕低於700px時,背景顏色不會改變,並且HeaderImg仍在顯示。

<head> 
    <meta charset="utf-8" /> 
    <meta name="viewport" content="width=device-width" /> 
    <style> 
    #content { 
     text-align:center; 
     width:100%; 
     margin:0; 
     padding:0; 
    } 

    img{ 
     height:auto; 
     width: 100%; 
    } 

    @media only screen and (max-width: 700px) { 
     #content{ 
      background-color:#000; 
     } 
     #HeaderImg{ 
      display:none; 
     } 
    } 
    @media only screen and (max-width: 1920px) { 
     #HeaderImg{ 
      display:inline; 
     } 
    } 
    </style> 
    </head> 
    <div id="content"> 
     <img id="HeaderImg" src="LargeBanner_1920x300.png" width="600px" height="300px;" /> 
    </div> 
+0

你能解釋 「不工作」 請。 – 2014-12-01 19:14:49

+2

你是什麼意思的「不工作」?預期的行爲是什麼,你看到了什麼?你可以創建一個代碼片段或小提琴來說明你的問題嗎?有830+的代表點,我不認爲這是很多要求 - 你應該熟悉關於SO的規則。 – Terry 2014-12-01 19:15:10

+0

謝謝Terry,你的明智話將會被考慮到。 – Avien 2014-12-01 19:28:39

回答

2

這是因爲第二種風格否決了第一種風格。畢竟,小於700px也小於1920px。交換兩個聲明,或者爲第二個聲明指定一個最小寬度,就像這樣;

@media only screen and (min-width: 701px) and (max-width: 1920px) { 
    #HeaderImg{ 
     display:inline; 
    } 
} 

我會選擇指定最小寬度。這樣更清楚你的意圖是什麼,並且沒有意外地將屬性應用於< = 700px情況的風險,實際上這僅僅意味着701px到1920px的情況。

但它仍然應該改變顏色。它確實如此,但是你看不到它,因爲另一個問題是,一旦圖像被隱藏,包含div(#content)就會崩潰。它沒有高度,因此不再可見。所以爲了強化黑條的可見性,你必須給它一個明確的高度,或者給它一些內容。如果您希望它佔據圖像的空間,請使用樣式visibility而不是display來隱藏圖像。可見性將顯示/隱藏圖像,同時仍保留它在文檔中佔據的空間,因此圖像仍然會伸展#內容。

一個穿着下來,你的片斷的修改版本說明這一點:

#content { 
 
    text-align:center; 
 
    width:100%; 
 
    margin:0; 
 
    padding:0; 
 
    /* Just for demo */ 
 
    color: red; 
 
} 
 

 
img{ 
 
    height:auto; 
 
    width: 100%; 
 
} 
 

 
@media only screen and (max-width: 700px) { 
 
    #content{ 
 
    background-color:#000; 
 
    } 
 
    #HeaderImg{ 
 
    visibility: hidden; 
 
    } 
 
} 
 
@media only screen and (min-width: 701px) and (max-width: 1920px) { 
 
    #HeaderImg{ 
 
    visibility: visible; 
 
    } 
 
}
<div id="content"> 
 
    <img id="HeaderImg" src="LargeBanner_1920x300.png" width="600px" height="300px;" alt="Test replacement for missing image"> 
 
</div>

+1

值得注意的是,增加最小寬度肯定會是解決這個問題的推薦方法,因爲它使得它更清楚程序員打算擁有什麼發生。有時候CSS文件可能會非常混亂。 – charles 2014-12-01 19:42:13

+0

@charles我完全同意。我以爲我也寫過,但顯然我忘記了,所以我添加了一條關於它的線。謝謝。 – GolezTrol 2014-12-01 19:46:09