媒体查询看起来不起作用

不知道为什么这不起作用。有任何想法吗？媒体查询看起来不起作用

当屏幕低于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

媒体查询看起来不起作用

回答

相关问题