如何让我的背景图片与@媒体屏幕和()一起工作？

Question

我的@media代码对我输入的任何代码都没有反应，就像我试图改变背景颜色或背景图片一样，它不会有反应。

.logo-Home-desktop a {
  background-image: url("../images/logo.png");
  background-size: 300px;
  background-repeat: no-repeat;
  position: absolute;
  height: 300px;
  width: 350px;
  text-indent: -99999999px;
  left: 50px;
  background-size: 340px;
  display: block;
}

@media screen and(max-width: 600px) {
  .logo-Home-desktop a {
    height: 250px;
    width: 250px;
  }
}


/* fix logo here to center in moble not responsive to media code */

<header>
  <nav>
    <ul class="navigation">
      <li><a href="index.html">Home</a></li>
      <li><a href="locations.html">Locations</a></li>
      <li><a href="contacts.html">Contacts</a></li>
      <li class="logo-Home-desktop"><a href="index.html">logo</a></li>
    </ul>
  </nav>

</header>

Answer 1

你的媒体查询格式不对。

@media only screen and (max-width: 600px)

是正确的格式。

此外，确保有。

<meta name="viewport" content="width=device-width, initial-scale=1.0">

在你的头标签。