如何让我的背景图片与@media screen 和 () 一起工作

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">

在你的头部标签中。

如何让我的背景图片与@media screen 和 () 一起工作

how do make my background image work with @media screen and ()

css

media