如何使我的背景图像与@media屏幕和()一起使用

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

在你的头标签中。