只有第一个高于 851px 的媒体查询有效，但其他媒体查询不起作用

Question

我正在使用此代码来格式化我的产品页面，但我的媒体查询不起作用。

只有第一个查询有效(高于 851px(

我的代码：

.my-prods-container{
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
}
.my-prods{
margin-bottom: 30px;
box-sizing: border-box;
}
@media screen and (min-width:851px){
.my-prods{
flex-basis: 21%;
}
}
@media screen and (min-width:601px)and(max-width:850px){
.my-prods{
flex-basis: 30%;
}
}
@media screen and (min-width:401px)and(max-width:600px){
.my-prods{
flex-basis: 45%;
}
}
@media screen and (max-width:400px){
.my-prods{
flex-basis: 90%;
}
}

Answer 1

我相信您的媒体查询经过精心设计，但是您需要在and.

这样：

@media screen and (min-width:601px) and (max-width:850px)