媒体规则不适用于不同的窗口大小

Question

此处为html&css我正在尝试创建一个响应导航栏这是我的html代码：

<a href="" class="active">Contact</a> 
<a href="">About me</a>
<a href="" >Gallery</a>
<a href="" >Services</a>
<a href="#">Home</a>
</div>

这是我的css代码：

margin: 0px;
padding: 0px;
}
body{
background-color: rgb(255, 255, 255);
}
.n {
/*bosx-shadow: rgba(0, 0, 0, 0.09) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;*/
overflow: hidden;
background-color: rgb(31, 31, 31);
height: 60px;
}
.n a{
float: right;
margin-top: 7px;
border-width: 2px;
text-align: center;
list-style-type: none;
padding: 10px 18px;
align-items: center;
font-weight: bolder;
font-size:  20px;
color: white;

text-decoration: none;
font-family: 'Josefin Sans', sans-serif; 

}
.n a:hover {
color: #ff005d;
border-bottom: 3px solid #ff005d;
transition: 0.3s ;
} 
@media screen and (max-width:400px){
body{
background-color: black;
}
}

但是在css中，当i sm尝试使用媒体查询时，更改窗口大小后查询不起作用。如果有人知道这个问题的解决方案，请帮我解决

Answer 1

你的媒体规则工作正常，你只需要让你的窗口大小小于400px(例如最大值：900px(：

body{
background-color: white;
}
@media screen and (max-width:900px){
body{
background-color: black;
}
}