媒體查詢看起來不起作用

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

當屏幕低於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>

來源

2014-12-01 Avien

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

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

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

這是因爲第二種風格否決了第一種風格。畢竟，小於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>

來源

2014-12-01 19:21:51 GolezTrol

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

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

媒體查詢看起來不起作用

回答

相關問題