Question

不确定为什么这不起作用。有任何想法吗？

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

Answer 1

那是因为第二种风格否决了第一种风格。毕竟，不到700px也小于1920px。交换两个声明，或指定第二个声明的最小宽度，如下所示;

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

我会选择指定最小宽度。这样就可以更清楚你的意图是什么，并且不存在意外将属性应用于＆lt; = 700px情况的风险，这实际上仅适用于701px到1920px的情况。

但是，它应该仍然会改变颜色。确实如此，但你看不到它，因为另一个问题是，一旦图像被隐藏，包含的div（#content）将会崩溃。它没有高度，因此不再可见。因此，要强制显示黑条，您必须给它一个明确的高度，或给它某种内容。如果您希望它占据图像的空间，请使用样式visibility而不是display隐藏图像。可见性将显示/隐藏图像，同时仍保留其在文档中占据的空间，因此图像仍将延伸#content。

您的代码段的修饰版本显示了这一点：

＆＃13;

#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;
  }
}

＆＃13;

<div id="content">
  <img id="HeaderImg" src="LargeBanner_1920x300.png" width="600px" height="300px;" alt="Test replacement for missing image">
</div>

＆＃13;

媒体查询似乎不起作用

1 个答案: