css - 如何使我的背景图像与@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>

标签： cssmedia

Answer 1

您的媒体查询格式错误。

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

是正确的格式。

此外，请确保拥有：

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

在你的头部标签中。